Vue-路由(二)

保存一些简单的路由案例，可以通过案例来学习

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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/miao91/p/13529283.html