Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。

需要引入vue-router.js

1.基本介绍:

https://www.cnblogs.com/superlizhao/p/8527317.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
复制代码
<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
     
    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
         <router-view></router-view>   
    </div>
 
</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })
 
</script>
复制代码

 

 

2.传递参数

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链,to 相当于就是 href
        -->
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/user/哒哒哒">用户</router-link>
        <router-link to="/user/哒哒哒2?age=20&sex=man">用户2</router-link>
    </div>
    <div>
        <router-view></router-view>
         
    </div>
     
  </div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/main.js"></script>

  main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var route=[
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:{
            template:`
            <div>
                <h1>HOME</h1>
            </div>
            `
        }
    },
    {
        path:'/about',
        component:{
            template:`
                <div>
                    <h1>ABOUT</h1>
                </div>
            `
        }
    },
    {
        path:'/user/:namee',
        component:{
            template:`
                <div>
                    <h2>姓名:{{$route.params.namee}}</h2>
                    <h2>age:{{$route.query.age}}</h2>
                    <h2>sex:{{$route.query.sex}}</h2>
                </div>
            `
        }
    }
    ]
 
var router=new VueRouter({
    routes:route
})
 
new Vue({
    el:'#app',
    router:router
})

  

 

 

this.route.query和this.route.params & query传参和params传参的使用和区别,这篇文章写的很详细

https://www.php.cn/js-tutorial-406276.html

 

 

3.子路由:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
            <div class="menu">
                <!--
                    router-link 相当于就是超链,to 相当于就是 href
                -->
                <router-link to="/home">首页</router-link>
                <router-link to="/about">关于</router-link>
                <router-link to="/user/哒哒哒">用户</router-link>
                <router-link to="/user/哒哒哒2?age=20&sex=man">用户2</router-link>
            </div>
            <div>
                <router-view></router-view>
                 
            </div>
             
        </div>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script src="js/main.js"></script>

  main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var route=[
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:{
            template:`
            <div>
                <h1>HOME</h1>
            </div>
            `
        }
    },
    {
        path:'/about',
        component:{
            template:`
                <div>
                    <h1>ABOUT</h1>
                </div>
            `
        }
    },
    {
        path:'/user/:namee',
        component:{
            template:`
                <div>
                    <h2>姓名:{{$route.params.namee}}</h2>
                    <h2>age:{{$route.query.age}}</h2>
                    <h2>sex:{{$route.query.sex}}</h2>
                    <router-link v-bind:to="'/user/'+$route.params.namee+'/more'">more</router-link>
                    <router-view></router-view>
                </div>
            `
        },
        children:[
            {
                path:'more',//以“/”开头的嵌套路径会被当作根路径,所以子路由上不用加“/”;在生成路由时,主路由上的path会被自动添加到子路由之前,所以子路由上的path不用在重新声明主路由上的path了             component:{
                    template:`
                        <div>
                            姓名:{{$route.params.namee}}
                        </div>
                        `
                }
            }
        ]
    }
    ]
 
var router=new VueRouter({
    routes:route
})
 
new Vue({
    el:'#app',
    router:router
})

  点击more时,显示子路由内容

 

 

posted on   MyBeans  阅读(240)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示