vue-route 路由
Posted liea
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-route 路由相关的知识，希望对你有一定的参考价值。
SPA 介绍：
+ 后段渲染（存在渲染性能问题）
+ Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
+ SPA（Single Page Application ) 单页面应用程序： 整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进后退操作。
+ SPA的实现原理之一： 基于URL地址的hash （hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
+ 在实现SPA过程中，最核心的技术点就是前端路由。
前端路由：
概念： 根据不同的用户事件，显示不同的页面内容。
本质： 用户事件与事件处理函数之间的对应关系。
用户触发事件，前端路由负责事件监听，触发事件后，通过事件函数渲染相应内容。
简易模拟实现前端路由功能:
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <style> 11 .menu a { 12 display: inline-block; 13 margin-right: 10px; 14 line-height: 30px; 15 padding:0 20px; 16 background-color: lightblue; 17 text-decoration: none; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div id=‘app‘> 24 <div class="menu"> 25 <a :href="item.key" v-for=‘(item, index) in menu‘ :key=‘index‘>{{item.title}}</a> 26 </div> 27 <component :is=‘comName‘></component> 28 </div> 29 </body> 30 <script> 31 var vm = new Vue({ 32 el: ‘#app‘, 33 data: { 34 comName: ‘home‘, 35 menu: [ 36 { 37 title: ‘首页‘, 38 key: ‘#/home‘ 39 }, 40 { 41 title: ‘新闻‘, 42 key: ‘#/news‘ 43 }, 44 { 45 title: ‘关于‘, 46 key: ‘#/about‘ 47 } 48 ] 49 }, 50 components: { 51 ‘home‘:{ 52 template:‘<h1>首页home</h1>‘ 53 }, 54 ‘news‘:{ 55 template:‘<h1>新闻news</h1>‘ 56 }, 57 ‘about‘:{ 58 template:‘<h1>关于about</h1>‘ 59 }, 60 } 61 }) 62 63 window.onhashchange = () => { 64 vm.comName = location.hash.slice(2) 65 console.log(vm.comName) 66 } 67 </script> 68 69 </html>
vue-router：
Vue Router (官网： http://router.vuejs.org/zh/) 是Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router 包含的功能有：
1. 支持HTML5历史模式或hash模式
2.支持嵌套路由
3.支持路由参数
4.支持编程式路由
5.支持命名路由
6.路由守卫
7.过渡动画
8.懒加载
....
基本使用步骤：
1.引入相关库文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script scr=‘https://unpkg.com/vue-router/dist/vue-router.js‘></script>
2.添加路由链接
<div id=‘app‘>
<!-- 路由链接 -->
<router-link to=‘/home‘>home</router-link>
<router-link to=‘/news‘>news</router-link>
<router-link to=‘/about‘>about</router-link>
</div>
3.添加路由填充位
<div id=‘app‘>
<!-- 路由填充位 -->
<router-view></router-view>
</div>
4.配置路由规则并创建路由实例
代码：
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <script src=‘https://unpkg.com/vue-router/dist/vue-router.js‘></script> 11 </head> 12 13 <body> 14 <div id=‘app‘> 15 <!-- 路由链接 --> 16 <router-link to=‘/home‘>home</router-link> 17 <router-link to=‘/news‘>news</router-link> 18 <router-link to=‘/about‘>about</router-link> 19 20 <!-- 路由填充位 --> 21 <router-view></router-view> 22 </div> 23 </body> 24 <script> 25 26 const home = { 27 template: ‘<h1>首页home</h1>‘ 28 } 29 30 const news = { 31 template: ‘<h1>新闻news</h1>‘ 32 } 33 34 const about = { 35 template: ‘<h1>关于about</h1>‘ 36 } 37 38 const router = new VueRouter({ 39 // routes 是路由规则数组 40 // 每个路由规则都是一个配置对象，其中至少包含path和component两个属性： 41 // path 表示当前路由规则匹配的hash地址 42 // component 表示当前路由规划对应要展示的组件 43 routes: [ 44 { 45 path: ‘/home‘, 46 component: home 47 }, 48 { 49 path: ‘/news‘, 50 component: news 51 }, 52 { 53 path: ‘/about‘, 54 component: about 55 } 56 ] 57 }) 58 59 var vm = new Vue({ 60 el: ‘#app‘, 61 data: { 62 63 }, 64 components: { 65 ‘home‘: home, 66 ‘news‘: news, 67 ‘about‘: about, 68 }, 69 // 挂载路由 70 router 71 }) 72 </script> 73 74 </html>
嵌套路由的用法：
嵌套路由功能分析：
1.点击父级路由链接显示模版内容
2.模版内容中有忧子级路由链接
3.点击子级路由链接显示子级模版内容
嵌套路由的配置：
代码：
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <script src=‘https://unpkg.com/vue-router/dist/vue-router.js‘></script> 11 </head> 12 13 <body> 14 <div id=‘app‘> 15 <!-- 路由链接 --> 16 <router-link to=‘/home‘>home</router-link> 17 <router-link to=‘/register‘>register</router-link> 18 19 <!-- 路由填充位 --> 20 <router-view></router-view> 21 </div> 22 </body> 23 <script> 24 25 const home = { 26 template: ‘<h1>首页home</h1>‘ 27 } 28 29 const register = { 30 template: ` 31 <div> 32 <h1>register</h1> 33 <router-link to=‘/register/tab1‘>tab1</router-link> 34 <router-link to=‘/register/tab2‘>tab2</router-link> 35 <router-view> </router-view> 36 </div> 37 ` 38 } 39 40 const tab1 = { 41 template: ‘<h1>tab1子组件</h1>‘ 42 } 43 44 const tab2 = { 45 template: ‘<h1>tab2子组件</h1>‘ 46 } 47 48 const router = new VueRouter({ 49 // routes 是路由规则数组 50 // 每个路由规则都是一个配置对象，其中至少包含path和component两个属性： 51 // path 表示当前路由规则匹配的hash地址 52 // component 表示当前路由规划对应要展示的组件 53 routes: [ 54 { 55 path: ‘/home‘, 56 component: home 57 }, 58 { 59 path: ‘/register‘, 60 component: register, 61 // 通过children 属性，为register 添加子路由规则 62 children: [ 63 { 64 path: ‘/register/tab1‘, 65 component: tab1 66 }, 67 { 68 path: ‘/register/tab2‘, 69 component: tab2 70 }, 71 ] 72 } 73 ] 74 }) 75 76 var vm = new Vue({ 77 el: ‘#app‘, 78 data: { 79 80 }, 81 components: { 82 ‘home‘: home, 83 ‘register‘: register, 84 ‘tab1‘: tab1, 85 ‘tab2‘: tab2 86 }, 87 // 挂载路由 88 router 89 }) 90 </script> 91 92 </html>
动态路由匹配：
应用场景： 通过动态路由参数的模式进行路由匹配
配置路由
1 var router = new VueRouter({ 2 routes: [ 3 // 动态路径参数 以冒号开头 4 { 5 path: ‘/user/:id‘, 6 component: UserList 7 } 8 ] 9 })
获取路由参数：
1 const UserList = { 2 // 路由组件中通过$route.params 获取路由参数 3 template: `<div>{{$route.params.id}} </div>` 4 }
路由组件传递参数：
$router 与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由节藕
1.props的值为布尔值类型
var router = new VueRouter({ routes: [ { // 如果props 被设置为true， route.params 将会被设置为组件属性 path: ‘/user‘, component: User, props: true } ] }) const User = { props: [‘id‘], template: `<div>当前用户ID：{{id}</div>` }
2.1.props的值为对象类型
var router = new VueRouter({ routes: [ { // 如果props 被设置为true， route.params 将会被设置为组件属性 path: ‘/user‘, component: User, props: { name:‘zhangsan‘, age:‘18‘ } } ] }) const User = { props: [‘name‘, ‘age‘], template: `<div>{{name, age}}</div>` }
3.1.props的值为函数类型
var router = new VueRouter({ routes: [ { // 如果props 被设置为true， route.params 将会被设置为组件属性 path: ‘/user‘, component: User, props: route => ({ name: ‘zhangsan‘, age: ‘18‘, id: route.params.id }) } ] }) const User = { props: [‘name‘, ‘age‘, ‘id‘], template: `<div>{{name, age}}</div>` }
命名路由的配置规则：
<touter-link :to=‘{name:"user", params:{id: 123}}‘>User</touter-link>
const router = new VueRouter({
routes: [
{
path:‘/user/:id‘,
component: User,
name:‘user‘
}
]
})
编程式导航：
this.$router.push(‘/users‘) //调转到指定路径
this.$router.go(-1) // 前进后退
以上是关于vue-route 路由的主要内容，如果未能解决你的问题，请参考以下文章
vue-router 2.0 常用基础知识点之router-link
vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {
vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {