共计 3419 个字符，预计需要花费 9 分钟才能阅读完成。
Vue.js 路由(Vue-router)
装置
间接引入
<script src="vue.js"></script>
<script src="vue-router.js"></script>vue-router 下载链接
https://unpkg.com/vue-router/…
npm 下载
npm install vue-router
如果在一个模块化工程中应用它，必须要通过 Vue.use() 明确地装置路由性能：
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)开始
引入 Vue 和 VueRouter 插件
<script src="vue.js"></script>
<script src="vue-router.js"></script>书写 html
<div id="box">
</div>
<!-- 定义模版 -->
<template id="a">
<div>
第一个 router
</div>
</template>
<template id="b">
<div>
第二个 router
</div>
</template>书写 js
var routes = [
{
path:"/one",
component:{template:"#a"}
},
{
path:"/two",
component:{template:"#b"}
},
];
// 定义路由组件
var router = new VueRouter({routes});
// 定义路由
new Vue({
el:"#box",
router
});
// 创立和挂载实例将模版削减链接
<div id="box">
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<router-view></router-view>
</div>< router-link > 默认会被渲染成一个
<a>标签 >>>to=”” 为咱们定义的路由< router-view > 路由匹配到的组件将渲染在这里
动静路由匹配
咱们常常须要把某种模式匹配到的所有路由，全都映射到同个组件。例如，咱们有一个 User 组件，对于所有 ID 各不相同的用户，都要应用这个组件来渲染。那么，咱们能够在 vue-router 的路由门路中应用『动静门路参数』（dynamic segment）来达到这个成果：
{
path:"/two:id",
component:{template:"#b"},
},当咱们在地址前面间接增加任意字符, 咱们会发现文档内容随着咱们的更改而扭转.
嵌套路由
咱们常常将动静路由和嵌套路由独特应用, 嵌套路由即是在原路由的根底上减少一个 children ,children 是一个数组. 并且咱们还须要在原来的组件上增加 < router-view > 来渲染 chlidren 外面的路由.
<template id="b">
<div>
第二个 router
<router-view>
</router-view>
</div>
</template>
<template id="c">
<div>
user:{{$route.params.id}}
</div>
</template>{
path:"/two",
component:{template:"#b"},
children:[
{
path:":id",
component:{template:"#c"}
}
]
},这样咱们就能够这样增加地址
编程式导航
除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来实现。
router.push(location)
想要导航到不同的 URL，则应用 router.push 办法。这个办法会向 history 栈增加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个办法会在外部调用，所以说，点击 <router-link :to=”…”> 等同于调用 router.push(…)。
该办法的参数能够是一个字符串门路，或者一个形容地址的对象。例如：
// 字符串
router.push('home')
// 对象
router.push({path: 'home'})
// 命名的路由
router.push({name: 'user', params: { userId: 123}})
// 带查问参数，变成 /register?plan=private
router.push({path: 'register', query: { plan: 'private'}})router.replace(location)
跟 router.push 很像，惟一的不同就是，它不会向 history 增加新记录，而是跟它的办法名一样 —— 替换掉以后的 history 记录。
router.go(n)
这个办法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，相似 window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 后退 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)命名路由
有时咱们通过一个名称来标识一个路由显得更不便一些，特地是在链接一个路由，或者是执行一些跳转的时候。你能够在创立 Router 实例的时候，在 routes 配置中给某个路由设置名称。
咱们间接在路由下增加一个 name 即可.
var routes = [
{
path:"/one",
name:"one",
component:{template:"#a"}
},
{
path:"/two",
name:"two",
component:{template:"#b"},
},
]要链接到一个命名路由，能够给 router-link 的 to 属性传一个对象：
<router-link :to="{name:'one'}">User</router-link>
<router-link :to="{name:'two'}">User</router-link>命名视图
有时候想同时（同级）展现多个视图，而不是嵌套展现，例如创立一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你能够在界面中领有多个独自命名的视图，而不是只有一个独自的进口。如果 router-view 没有设置名字，那么默认为 default。
<router-view></router-view>
<router-view></router-view>当咱们的视图如上时, 咱们会发现每一个路由被渲染了两次, 所以咱们须要为视图命名
<router-view name="a"></router-view>
<router-view name="b"></router-view>var Foo = {template: '<div>foo</div>'}
var Bar = {template: '<div>bar</div>'}
var routes = [
{
path:"/one",
name:"one",
components:{
a:Foo,
b:Bar
}
},
]重定向和别名
重定向
重定向 (Redirect) 就是通过各种办法将各种网络申请从新定个方向转到其它地位, 用于网站调整或网页被移到一个新地址, 它也是通过 routes 配置来实现，上面例子是从 /a 重定向到 /b：
var router = new VueRouter({
routes: [{ path: '/a', redirect: '/b'}
]
})别名
/a 的别名是 /b，意味着，当用户拜访 /b 时，URL 会放弃为 /b，然而路由匹配则为 /a，就像用户拜访 /a 一样。简略的说就是给 /a 起了一个外号叫做 /b , 然而实质上还是 /a
下面对应的路由配置为：
var router = new VueRouter({
routes: [{ path: '/a', component: A, alias: '/b'}
]
})『别名』的性能让你能够自在地将 UI 构造映射到任意的 URL，而不是受限于配置的嵌套路由构造。
