vue-router拥有的功能：
支持h5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名式路由
如何使用vue-router
1.使用router-link标签，在HTML中将转化为a标签，属性to为跳转的位置，HTML中为href
2.使用路由占位符，用于渲染路由数据
<div class="app"> <router-link to='/user'>user</router-link> <router-link to='/register'>register</router-link> <router-view></router-view> <!-- 路由占位符 --> </div>
3.实列模块
var user = { template: '<h1>user</h1>' } var register = { template: '<h1>register</h1>' }
4.导入vue-router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
必须在导入vue之后导入
5.实列vue-router,并添加路由规则
var router = new VueRouter({ //路由规则 routes: [ { path: '/user', component: user }, { path: '/register', component: register } ] })
path为路由应用到的地址，component为应用的组件
6.挂载路由
var app = new Vue({ el: '.app', router:router })
就这样一个简单的vue-router就实现了，完全代码以及运行页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div class="app">
<router-link to='/user'>user</router-link>
<router-link to='/register'>register</router-link>
<router-view></router-view>
<!-- 路由占位符 -->
</div>
<script>
var user = {
template: '<h1>user</h1>'
}
var register = {
template: '<h1>register</h1>'
}
var router = new VueRouter({
//路由规则
routes: [
{ path: '/user', component: user },
{ path: '/register', component: register }
]
})
var app = new Vue({
el: '.app',
router:router
})
</script>
</body>
</html>
<hr以上为基础路由建设
完成以上代码后会发现，刚进页面时一个组件都没有显示，这是因为我们没有写根路径的规则，下面我们进行路由重定向
var router = new VueRouter({ //路由规则 routes: [ { path: '/', component: user }, { path: '/user', component: user }, { path: '/register', component: register } ] })
就这样首页就可以默认加载一个组件
<hr>
嵌套路由
嵌套路由就是在父级路由里面再下一个子路由，可以看一下图片理解
再点击了register后才显示子路由的信息
1.修改扶组件的内容
var register = { template: "<div><h1>register</h1> <h1>子路由</h1><router-link to='/register/kid1'>kid1</router-link><router-link to='/register/kid2'>kid2</router-link ><router-view/></div> " }
子路由和之前写负路由一样的，router-link和router-view都要有
2.写子路由组件
var kid1 = { template: '<h1>kid1</h1>' } var kid2 = { template: '<h1>kid2</h1>' }
3.修改路由配置
{ path: '/register', component: register, children: [ { path: '/register/kid1', component: kid1 }, { path: '/register/kid2', component: kid2 } ], }
子路由的路径必须写在夫路由路径下
完全代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 9 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 10 </head> 11 12 <body> 13 <div class="app"> 14 <router-link to='/user'>user</router-link> 15 <router-link to='/register'>register</router-link> 16 17 <router-view></router-view> 18 <!-- 路由占位符 --> 19 </div> 20 <script> 21 22 var user = { 23 template: '<h1>user</h1>' 24 } 25 var register = { 26 template: "<div><h1>register</h1> <h1>子路由</h1><router-link to='/register/kid1'>kid1</router-link><router-link to='/register/kid2'>kid2</router-link ><router-view/></div> " 27 } 28 29 var kid1 = { 30 template: '<h1>kid1</h1>' 31 } 32 var kid2 = { 33 template: '<h1>kid2</h1>' 34 } 35 var router = new VueRouter({ 36 //路由规则 37 routes: [ 38 { path: '/', component: user }, 39 { path: '/user', component: user }, 40 { 41 path: '/register', component: register, 42 children: [ 43 { path: '/register/kid1', component: kid1 }, 44 { path: '/register/kid2', component: kid2 } 45 ], 46 } 47 48 ] 49 }) 50 var app = new Vue({ 51 el: '.app', 52 router: router 53 }) 54 55 </script> 56 </body> 57 58 </html>
命名路由
顾名思义命名路由就是给路由规则命名，在使用router-link的时候直接写路由名称就可以使用相关规则，如：
<router-link :to="{name:'user'}">user</router-link>
{ name: 'user', path: '/user', component: user },
编程式路由
通过调用JavaScript形势调用api实现的导航方式叫编程式路由
var user = { template: '<h1>user<button @click="goregister">到user</button></h1>', methods: { goregister: function () { this.$router.push('/register') } } }
同理还可以会用this.$router.go()实现上一部和下一步，历史操作。