一、路由的基本使用
①安装vue-router路由模块
②创建一个路由对象：
var routerObj = new VueRouter({ routes: [ //每个路由匹配规则，都是一个对象（必须要有两个属性） { path: '/login', component: login }, // 属性1 是path，表示监听哪个路由链接地址，属性2是 是component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件 { path: '/register', component: register } ], linkActiveClass: 'myactive';//默认类名是router-link-exact-active router-link-active，这个可以改变指定类名 })
③写好相关组件
④注册路由
routers:routerObj ;
⑤在HTML上写入展示标签，<router-view></router-view>，跳转类目<a href="#/login">登录</a> //此处需加#号，为解决#号这个问题，vue-router有特设的一个标签
<router-link to="/register" tag="span">注册<router-link>
完整代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> <style> .myActive{ font-weight: bold; color: pink; font-size: 25px; } .v-enter,.v-leave-to{ opacity: 0; transform: translateX(140px); } .v-enter-active,.v-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <a href="#/login">登录</a> <!-- <a href="#/register">注册</a> --> <!--默认渲染为a标签,tag可改变--> <!-- <router-link to="/login" tag="span">登录</router-link> --> <router-link to="/register">注册</router-link> <transition mode="out-in"><!--加个过渡模式--> <router-view></router-view><!--注意别写错了--> </transition> </div> <script> var login = { template: '<h1>登录组件</h1>' } var register = { template: '<h1>注册组件</h1>' } var routerObj = new VueRouter({ routes:[ { path: '/', redirect: 'login' },//redirect重定向 { path: '/login', component: login }, { path: '/register', component: register } ], // linkActiveClass:'myActive' }) var vm = new Vue({ el:'#app', data:{}, methods:{}, router: routerObj }) </script> </body> </html>
二、使用$route.query的方式传递路由的参数
第一种传递方式：使用query
<router-link to="/login?id=10&name=lxf">登录</router-link>
使用：this.$route.query.id（函数下），内容下可以去掉this. <h1>{{$route.query.id}}</h1>
第二种传递方式：使用params
<router-link to="/login/12/lxf">登录</router-link>
template:'<h1>登录--{{$route.params.id}}</h1>'
三、路由的嵌套
<div id="app"> <router-link to="/account">account</router-link> <router-view></router-view> </div> <template id="temp"> <div> <h1>这是Account组件</h1> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view> </div> </template>
var account = { template:'#temp' } var login = { template:'<h3>登录组件</h3>' } var register = { template:'<h3>注册组件</h3>' } var router = new VueRouter({ routes:[ { path:'/account', component:account, // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址 children:[ { path:'login', component: login}, { path:'register', component: register} ] } ] }) var vm = new Vue({ el:'#app', data:{}, methods:{}, router })
四、路由-使用命名视图实现经典布局
<router-view></router-view> <div class="container"> <router-view name="left"></router-view><!--给路由视图起对应名字--> <router-view name="main"></router-view> </div>
var router = new VueRouter({ routes:[ { path:'/', components:{//components是重点 'default':header,//设置默认的路由 'left':left,//名字为字符串 'main':main } } ] })