一：
vue-roiter是给Vue.js提供的路由管理的插件，在使用vue-router时需要引入vue-router.js，可以用npm下载
注意：引入vue-router.js时要在引入的vue.js下面引入，vue-router.js是依赖vue.js的，如果位置放错了会报错
Vue-router的基本作用就是讲每个路径映射到对应的组件，并通过修改路由进行组件间的切换。
body写法：
<div id="app">
<!-- 1.router-link标签页面解析出来是a标签-->
<!-- 在原来要跳转页面直接用a标签，在Vue中用router-link
to='跳转的页面' 要跳转的页面名前面必须要有/，并且不用再创建新的html-->
<router-link to='/index'>首页</router-link>
<router-link to='/detail'>详情页</router-link>
<!-- 盛放导航对应的内容 不写内容会不显示-->
<router-view></router-view>
</div>
js：
//2.创建组件
var index={
template:`
<h1>这是首页</h1>
`
}
var detail={
template:`
<h1>这是详情页</h1>
`
}
//3.配置路由 const routes
const routes=[
//打开页面显示index
{path:'/',component:index},
{path:'/index',component:index},
{path:'/detail',component:detail}
]
//4.创建一个路由实例 const router
const router=new VueRouter({
routes:routes,
//linkActiveClass默认值是 router-link-active 更改linkActiveClass后面的值就可以自定义属性名
linkActiveClass:'active'
})
//5.把路由挂载到Vue实例中
new Vue({
el:'#app',
router:router
})
结果：
刚打开页面时：
QQ截图20180926174111.png
点击首页后：
QQ截图20180926174123.png
点击详情页后：
QQ截图20180926174132.png
二：路由的嵌套
点击用户页后的效果
QQ截图20180926174612.png
body:
<div id="app">
<router-link to='/index'>首页</router-link>
<router-link to='/deital'>用户页</router-link>
<router-view></router-view>
</div>
js:
<script>
//2.创建组件
var Index={
template:`
<h1>我是首页</h1>
`
}
var Deital={
template:`
<div>
<h1>我是用户页</h1>
<ul>
<li>
<router-link to='/deital/user'>用户</router-link>
</li>
<li>
<router-link to='/deital/login'>登录</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var User={
template:`
<h3>这是注册页</h3>
`
}
var Login={
template:`
<h3>这是登录页</h3>
`
}
//3.配置路由
const routes=[
{path:'/',component:Index},
{path:'/index',component:Index},
{
path:'/deital',
component:Deital,
children:[//children后面跟数组 被嵌套的路由组件写的时候前面不用加/
{path:'user',component:User},
{path:'login',component:Login}
]
}
]
//4.创建路由实例
const router=new VueRouter({
routes:routes
})
//5.把路由挂载到Vue实例中
new Vue({
el:'#app',
router:router
})
</script>
三：路由的传参
路由传参有两种方式：
第一种：<router-link to='/deital/user?uname=jack&&undw=123'></router-link>
?参数名=值&&参数名=值 中间用&连接 可以写一个&也可以写两个&&
接收：用{{$route.query}}接收
var User={
template:`
<div>
<a href='#'>{{$route.query}}</a>
<ul>
<li>{{$route.query.uname}}</li>
<li>{{$route.query.undw}}</li>
</ul>
</div>
`
}
第二种：<router-link to='/deital/login/rose/456'></router-link>
/参数名/数值 中间用/隔开
接收：{{$route.params}}
var Login={
template:`
<div>
<a href='#'>{{$route.params}}</a>
<ul>
<li>{{$route.params.userName}}</li>
<li>{{$route.params.password}}</li>
</ul>
</div>
`
}