一、起步
<div id="app"> <!-- 应用router-link组件来导航，通过传入to属性指定链接，最终router-link会被渲染成一个a标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> <div class="router-container"> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> <script> //1、定义路由组件（引入路由组件） const Foo = { template: '<div class="foo"><h2>Foo</h2></div>' } const Bar = { template: '<div class="bar"><h2>Bar</h2></div>' } //2、定义路由 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] //3、创立router实例 const router = new VueRouter({ routes }) let vm = new Vue({ el: '#app', router })</script>二、动静路由
给路由门路设置参数
//定义路由组件（或引入路由组件）const User ={ template: '<div>User {{$route.params.id}}</div>', //因参数发生变化，组件会复用，则组件生命周期钩子不会被调用，通过以下两种办法监测路由扭转 //办法一：应用watch监测$route //watch:{ // $route(to,from){ // //对路由变动做出响应 // } //} //办法二： beforeRouteUpdate(to,from,next){ // react to route changes... // don't forget to call next() }}//实例化vue-routerconst router = new VueRouter({ routes:[ { //动静门路参数以：冒号结尾 path: '/user/:id', component: User } ]})传入实参的办法
<!--申明式：应用<router-link>组件时，应用:to动静绑定--><router-link :to="{path: '/user/'+user.id}">Go to User</router-link>//编程式：应用router.push时router.push({name: 'user',params: {id: user.id}})三、嵌套路由
能够在路由组件中嵌套<router-view>标签，作为子路由的进口
//定义路由组件cosnt User = { template: `<div> <h2>User {{$route.params.id}}</h2> <router-view></router-view> </div>`}//定义子路由组件const UserProfile = { template: '<div>user profile</div>'}应用children属性配置子组件
const router = new VueRouter({ routes:[ { path: '/user/:id', component: User, children:[ { path: '/profile', component: UserProfile } ] } ]})四、编程试的导航
1、router.push()
除了应用<router-link>创立a标签来定义导航链接，咱们还能够借助router的实例办法，通过编写代码来切换路由。
想要导航到不同的url,则应用router.push()办法，该办法会向history栈增加一个新的纪录。
当点击<router-link>时，会在外部调用router.push()办法，所以点击<router-link :to="...">等同于调用router.push(...)
router.push()的参数取值如下：
// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查问参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})若提供了path,则name会被疏忽。因而在定义带动静参数的路由时，若应用params，则必须应用name。to也实用该规定。
router.push({name:'user',params: {user.id}})router.push({path: `/user/${user.id}`})//上面的写法，params不会失效router.push({path:'/user',params:{user.id}})2、router.replace()
跟router.push()很像，惟一的区别就是它不会向history增加新纪录，而是跟它的办法名一样，替换掉以后history纪录
申明式：
<router-link :to="..." replace>编程式：
router.replace(...)3、route.go(n)
参数是一个整数，意思是在history纪录中向前或向后退多少步，相似window.history.go(n)
五、路由命名
应用name属性给route命名，能够通过name链接到该路由
<!--应用router-link--><router-link :to="name: 'user',params: {userId: 123}">User</router-link>//...//应用router.push()router.push({name:'user',params:{userId:123}})这两种办法都会把路由导航到/user/123门路
六、命名视图
当须要同级展现多个视图时，而不是嵌套展现时，例如创立一个布局，有sidebar和main两个视图，咱们能够在界面中领有多个独自命名的视图，应用命名来区别。
<router-view></router-view><router-view name='sidebar'></router-view><router-view name='mainView'></router-view>多个视图就须要多个组件，确保正确应用components
const router = new VueRouter({ routes:[ { path: '/', components: { //未命名的默认为default default: HeaderView, siderbar: Siderbar, mainView: MainView } } ]})七、重定向和别名
1、重定向-redirect
重定向：当用户拜访/a时，url会被替换成/b,而后匹配路由为/b
const router = new VueRouter({ routes: [ { path: '/a', //将门路从'/a'重定向到'/b' //redirect: '/b', //重定向的指标也能够是一个命名的路由 //redirect:{name:'foo'} //也能够是一个办法，动静返回重定向指标 redirect: to => { //办法承受指标门路作为参数 //return 重定向的 字符串门路/门路对象 } } ]})2、别名-alias
若/a的别名是/b，则当用户拜访/b时，url会放弃/b,但路由匹配为/a,就像拜访/a一样。
const router = new VueRouter({ routes:[ { path: '/a', alias: '/b' } ]})八、路由组件传参
在组件中应用$route会使之与对应路由造成高度耦合，从而使组件只能在某些特定的url上应用。举荐应用props将组件和路由解耦
const User = { template: '<div>User {$route.params.id}</div>' }const router = new VueRouter({ routes: [ { path: '/', component: User, props: true }, //对于蕴含命名视图的路由，必须为每个命名视图增加props { path:'/user/:id', components:{ default: User, sildebar: Sidebar }, props:{ default: true, sidebar: true } } ]})props的取值：
1、布尔模式-如果props被设置为true,route.params将会被设置为组件属性
2、对象模式
如果props是一个对象，它会被按原样设置为组件属性
const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ]})3、函数模式
能够创立一个函数返回props,这样能够将参数转换成另一种类型，将动态值与基于路由的值联合。
const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: route => ({query: route.query.q}) } ]})URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。