Vue 路由基本使用

网友投稿 645 2022-05-30

目录

Vue.js 路由

安装

直接下载 / CDN

NPM

to

replace

append

tag

active-class

exact-active-class

event

Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。

Vue.js 路由需要载入 vue-router 库

中文文档地址:vue-router文档。

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式,在 IE9 中自动降级

自定义的滚动条行为

安装

直接下载 / CDN

Vue 路由的基本使用

https://unpkg.com/vue-router/dist/vue-router.js

NPM

cnpm install vue-router

Vue.js + vue-router 可以很简单的实现单页应用。

 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容.

Hello App!

Go to Foo

Go to Bar

js

// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件。

// 可以从其他文件 import 进来

const Foo = { template: '

foo
' }

const Bar = { template: '

bar
' }

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器,

// 或者,只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

// 3. 创建 router 实例,然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写)相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由,

// 从而让整个应用都有路由功能

const app = new Vue({

router

}).$mount('#app')

// 现在,应用已经启动了!

to

表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

Home Home Home Home Home User Register

replace

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

append

设置 append 属性后,则在当前 (相对) 路径前添加其路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

tag

有时候想要  渲染成某种标签,例如 

  • 。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

    foo

  • foo
  • active-class

    设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。

    Router Link 1 Router Link 2

    exact-active-class

    配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

    Router Link 1

    Router Link 2

    event

    声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

    Router Link 1

    代码设置了 event 为 mouseover ,及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

    NAT Vue

    版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

    上一篇:帮你省了3个小时,来直接开发Unity的HelloWorld【保姆级别操作指导】
    下一篇:Python爬虫 | 微博热搜定时爬取,堪称摸鱼神器
    相关文章