Vue基础(十)：Vue路由(二)

  • A+
所属分类：Web前端
摘要

应用场景：通过动态路由参数的模式进行路由匹配。执行效果：$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。 
便宜好用的国外VPS推荐

1. 路由

1.1 vue-router动态路由匹配

1.1.1 动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配。

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link to="/user/3">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         //路由组件中通过$route.params获取路由参数         template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'       }        const Register = {         template: '<h1>Register 组件</h1>'       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user'},           //动态路径参数 以冒号开头           { path: '/user/:id', component: User },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

1.1.2 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。 

(1)  props的值为布尔类型

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link to="/user/3">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         props: ['id'], //使用 props 接收路由参数         template: '<h1>User 组件 -- 用户id为: {{id}}</h1>' //使用路由参数        }        const Register = {         template: '<h1>Register 组件</h1>'       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user'},           //如果 props 被设置为 true，route.params 将会被设置为组件属性           { path: '/user/:id', component: User, props: true },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

(2)  props的值为对象类型

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link to="/user/3">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         props: ['id', 'uname', 'age'],         template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'       }        const Register = {         template: '<h1>Register 组件</h1>'       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user'},           //如果 props 是一个对象，它会被按原样设置为组件属性           { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

 

 

(3)  props的值为函数类型

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link to="/user/3">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         props: ['id', 'uname', 'age'],         template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'       }        const Register = {         template: '<h1>Register 组件</h1>'       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user' },           //如果 props 是一个函数，则这个函数接收 route 对象为自己的形参           {             path: '/user/:id',             component: User,             props: route => ({ uname: 'zs', age: 20, id: route.params.id })           },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

 

 

1.2 vue-router命名路由 

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         props: ['id', 'uname', 'age'],         template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'       }        const Register = {         template: '<h1>Register 组件</h1>'       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user' },           {             // 命名路由             name: 'user',             path: '/user/:id',             component: User,             props: route => ({ uname: 'zs', age: 20, id: route.params.id })           },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

 

 

1.3 vue-router编程式导航 

页面导航的两种方式：

声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的<a></a>链接或vue中的链接<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的 location.href 

1.3.1 编程式导航基本用法

常用的编程式导航 API 如下： 

this.$router.push('hash地址')

this.$router.go(n)

Vue基础(十)：Vue路由(二)

 

 

1.3.2 编程式导航参数规则 

router.push() 方法的参数规则：

字符串(路径名称)

router.push('/home') 

对象 router.push({ path: '/home' }) 

命名的路由(传递参数) router.push({ name: '/user', params: { userId: 123 }})

带查询参数，变成 /register?uname=lisi

router.push({ path: '/register', query: { uname: 'lisi' }})

<!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>     <!-- 导入 vue 文件 -->     <script src="./lib/vue_2.5.22.js"></script>     <script src="./lib/vue-router_3.0.2.js"></script>   </head>   <body>     <!-- 被 vm 实例所控制的区域 -->     <div id="app">       <router-link to="/user/1">User1</router-link>       <router-link to="/user/2">User2</router-link>       <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>       <router-link to="/register">Register</router-link>        <!-- 路由占位符 -->       <router-view></router-view>     </div>      <script>       const User = {         props: ['id', 'uname', 'age'],         template: `<div>           <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>           <button @click="goRegister">跳转到注册页面</button>         </div>`,         methods: {           goRegister() {             this.$router.push('/register')           }         },       }        const Register = {         template: `<div>           <h1>Register 组件</h1>           <button @click="goBack">后退</button>         </div>`,         methods: {           goBack() {             this.$router.go(-1)           }         }       }        // 创建路由实例对象       const router = new VueRouter({         // 所有的路由规则         routes: [           { path: '/', redirect: '/user' },           {             // 命名路由             name: 'user',             path: '/user/:id',             component: User,             props: route => ({ uname: 'zs', age: 20, id: route.params.id })           },           { path: '/register', component: Register }         ]       })        // 创建 vm 实例对象       const vm = new Vue({         // 指定控制的区域         el: '#app',         data: {},         // 挂载路由实例对象         // router: router         router       })     </script>   </body> </html>

执行效果：

Vue基础(十)：Vue路由(二)

 

点击按钮，跳转到注册界面。

Vue基础(十)：Vue路由(二)

便宜好用的国外VPS推荐