保存一些简单的路由案例，可以通过案例来学习
1.路由基础
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>路由基础</title> 7 </head> 8 <body> 9 <!-- 需要引入vue.js和vue-router.js文件 --> 10 <script src="vue.js"></script> 11 <script src="vue-router.js"></script> 12 <div id="app"> 13 <!--路由可制作单页面应用， 14 使用router-link组件来导航，其中to属性指定链接 15 router-link标签默认会被渲染成一个a标签 16 当路由匹配成功，将自动设置class属性值.router-link-active 17 --> 18 <h2>Hello！！</h2> 19 <router-link to="/header">Go to header</router-link> 20 <router-link to="/footer">Go to footer</router-link> 21 <!-- 路由出口：匹配到的组件内容将渲染在这里 --> 22 <router-view></router-view> 23 </div> 24 <script> 25 //如果使用哦模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter) 26 //定义路由组件 可使用import 27 const Hea = {template:'<h1>this is header</h1>'} 28 const Foo = {template:'<h1>this is footer</h1>'} 29 30 //定义路由： 31 /* 每个路由应该映射一个组件， 32 * 其中component可以是通过Vue.extend()创建组件构造器， 33 * 或者只是一个组件配置对象 34 */ 35 const routes = [ 36 //path表示当前路由规则对应要展示的组件 37 //component表示但钱路由规则对应要展示的组件 38 {path:'/header' , component:Hea}, 39 {path:'/footer' , component:Foo} 40 ] 41 42 //创建路由实例，然后传'routes'配置，或者传其他配置参数 43 const router = new VueRouter({ 44 routes //相当于 routes：routes 的缩写 45 }) 46 47 //创建和挂载根实例 48 //要通过router配置参数注入路由，从而让整个应用都有路由功能 49 var vm = new Vue({ 50 router 51 }).$mount('#app') 52 53 /* 通过注入路由， 54 * 可以在任何组件内通过this.$router访问路由， 55 * 也可通过this.$route访问当前路由 56 */ 57 /* 58 export default{ 59 computed:{ 60 uesrname(){ 61 return this.$route.params.username 62 } 63 }, 64 methods:{ 65 goBack(){ 66 window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') 67 } 68 } 69 } 70 */ 71 </script> 72 </body> 73 </html>
2.接触动态路由
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>动态路由</title> 7 </head> 8 <body> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <div id="app"> 12 <h2>Hello</h2> 13 <router-link to="/User/1">Go to User</router-link> 14 <router-link to="/User/2">Go to User</router-link> 15 <router-link to="/User/3">Go to User</router-link> 16 <router-link to="/User/4">Go to User</router-link> 17 <router-view></router-view> 18 </div> 19 <script> 20 const User = { 21 /*当路径参数使用冒号标记时， 22 *匹配到的路由，参数值会被设置到this.$route.params 23 */ 24 template:'<h1>This is Id{{$route.params.id}}</h1>' 25 } 26 const router = new VueRouter({ 27 routes:[ 28 //动态路径参数以冒号开头 29 {path:'/user/:id',component:User} 30 ] 31 }) 32 const vm = new Vue({ 33 router 34 }).$mount('#app') 35 </script> 36 </body> 37 </html>
3.路由重定向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由重定向</title> </head> <body> <script src="vue.js"></script> <script src="vue-router.js"></script> <div id="app"> <h2>Hello</h2> <router-link to="/user1">Go to User1</router-link> <router-link to="/user2">Go to User2</router-link> <router-view></router-view> </div> <script> const User1 = { template:'<h1>This is User1</h1>' } const User2 = { template:'<h1>This is User2</h1>' } const router = new VueRouter({ routes:[ //通过使用路由规则的redirect属性，指定一个新的路由地址，可以完成路由的重定向 {path:'/',redirect:'/user1'}, {path:'/user1',component:User1}, {path:'/user2',component:User2} ] }) const vm = new Vue({ router }).$mount('#app') </script> </body> </html>
4.嵌套路由
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>嵌套路由</title> 7 </head> 8 <body> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <div id="app"> 12 <h2>Hello</h2> 13 <router-link to="/user1">Go to User1</router-link> 14 <router-view></router-view> 15 </div> 16 <script> 17 const User1 = { 18 template:'<div> 19 <router-link to="/user1/tab1">Go to Tab1</router-link> 20 <router-link to="/user1/tab2">Go to Tab2</router-link> 21 <router-view/> 22 </div>' 23 } 24 const Tab1 = { 25 template:'<h1>This is Tab1 in User1</h1>' 26 } 27 const Tab2 = { 28 template:'<h1>This is Tab2 in User1</h1>' 29 } 30 const router = new VueRouter({ 31 routes:[ 32 {path:'/user1',component:User1, 33 children:[ 34 {path:'/user1/tab1',component:Tab1}, 35 {path:'/user1/tab2',component:Tab2} 36 ] 37 }, 38 ] 39 }) 40 const vm = new Vue({ 41 router 42 }).$mount('#app') 43 </script> 44 </body> 45 </html>
5.动态路由匹配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态路由匹配</title> </head> <body> <script src="vue.js"></script> <script src="vue-router.js"></script> <div id="app"> <router-link to="/user1/1">Go to User1</router-link> <router-link to="/user1/2">Go to User1</router-link> <router-link to="/user2/1">Bo to User2</router-link> <router-link to="/user2/2">Go to User2</router-link> <router-link to="/user3/1">Go to User3</router-link> <router-link :to="/user3/2">Go to User3</router-link> <router-view></router-view> </div> <script> const User1 = { props:['id'], template:'<h1>This is User1 , id{{id}}</h1>' } const User2 ={ props:['id','uname','upwd'], template:'<h1>This is User2 , id:{{id}} ,name:{{uname}} and pwd:{{upwd}}</h1>' } const User3 = { porps:['id','uname','upwd'], template:'<h1>this is User3 , id:{{id}} ,name:{{uname}} and pwd:{{upwd}}</h1>' } const router = new VueRouter({ routes:[ //$route与对应路由形成高度耦合，不够灵活，可使用props将组件和路由解耦 //如果props被设置为true，toute.params会被设置为组件属性 {path:'/user1/:id',component:User1,props:true}, //如果props是一个对象，它会被按原样设置为组件属性 {path:'/user2/:id',component:User2,props:{uname:'list1',upwd:'123456'}}, //无法使用，prop传不出去，未知原因 //如果props是一个函数，则这个函数接收route对象为自己的形参 {path:'/user3/:id',component:User3,props:(route) => ({uname:'list2',upwd:654321,id:route.params.id})} ] }) const vm = new Vue({ router }).$mount('#app') </script> </body> </html>
6.命名路由
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>命名路由</title> 7 </head> 8 <body> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <div id="app"> 12 <!-- to属性前需要动态绑定一个对象 13 name为需要跳转的路径，params为要传的动态路由参数名和值(id) 14 --> 15 <router-link :to="{name:'Urouter'}">Go to User</router-link> 16 <router-view></router-view> 17 </div> 18 <script> 19 const User = { 20 template:'<h1>This is User</h1>' 21 } 22 const router = new VueRouter({ 23 routes:[ 24 //为了更方便的表示路由的路径，可以给路由规则起一个别名， 25 {path:'/user',component:User,name:'Urouter'} 26 ] 27 }) 28 const vm = new Vue({ 29 router 30 }).$mount('#app') 31 </script> 32 </body> 33 </html>
7.编程式导航
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>编程式导航</title> 7 </head> 8 <body> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <!-- 页面导航： 12 声明式导航：通过点击链接实现，如a标签、router-link标签 13 编程式导航：通过调用javascript形式的API是实现，如location.href 14 常用api： 15 this.$router.push('hash地址') //跳转到指定地址 16 this.$router.go(n) //n为数值，如-1后退一位，1为前进一位 17 --> 18 <div id="app"> 19 <router-link to="/no1">Go to No1</router-link> 20 <router-view></router-view> 21 </div> 22 <script> 23 const N1 = { 24 template:'<div> 25 <h1>This is No1</h1> 26 <button @click="go">Go to No2</button> 27 </div>', 28 methods:{ 29 go(){this.$router.push('/no2')} 30 } 31 } 32 /* router.push()使用规则 33 * 字符串：router.push('/home') 34 * 对象：router.push({path:/home}) 35 * 命名的路由(传递参数)：router.push({name:'/name:'/user',params:{userId:123}}) 36 * 带查询参数，变成/reqister?uname-list：router.push({path:'/reqister',query:{umane:'list'}}) 37 */ 38 const N2 = { 39 template:'<div> 40 <h1>This is No2</h1> 41 <button @click="re">Return</button> 42 </div>', 43 methods:{ 44 re(){this.$router.go(-1)} 45 } 46 } 47 const router = new VueRouter({ 48 routes:[ 49 {path:'/no1',component:N1}, 50 {path:'/no2',component:N2} 51 ] 52 }) 53 var vm = new Vue({ 54 router 55 }).$mount('#app') 56 </script> 57 </body> 58 </html>