方君の小窝
方君
2020-08-24

vue路由

# vue路由

# 一,安装路由

<script src="vue.js"></script>
<script src="vue-router.js"></script>
1
2

# 二,使用路由

  • code:./12.router.html
    <div id="app">
        <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->

        <!-- 6.切换按钮 -->
        <router-link to="/login" tag="button">登录</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 5.展示组件 -->
        <router-view></router-view>
    </div>


    <template id="login">
        <div>登录</div>
    </template>
    <template id="register">
        <div>注册</div>
    </template>


    <script src="vue.js"></script>
    <!-- 1. 安装 vue-router 路由模块 -->
    <script src="vue-router-3.0.1.js"></script>

    <script>
        //2.写组件
        var login = {
            template: "#login"
        }
        var register = {
            template: "#register"
        }
        // 3. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
        // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
        var routerObj = new VueRouter({
            routes: [
                // 路由匹配规则 
                // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
                //  属性1 是 path， 表示监听 哪个路由链接地址；
                //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
                // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
                { path: "/", redirect: "/login" },//重定向
                { path: "/login", component: login },
                { path: "/register", component: register },
            ]
        });


        var vm = new Vue({
            el: "#app",
            data: {},
            router: routerObj// 4.将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
        })
    </script>
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

# 三,路由嵌套

  • code:./13.deepRouter.html
    <div id="app">
        <router-link to="/index">index</router-link>
        <router-view></router-view>
    </div>

    <template id="index">
        <div>
            <!-- 注意子路由路径 -->
            <router-link to="/index/login">登录</router-link>
            <router-link to="/index/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>

    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>

    <script>
        var index = {
            template: "#index"
        }
        var login = {
            template: "<h1>登录</h1>"
        }
        var register = {
            template: "<h1>注册</h1>"
        }

        var router = new VueRouter({
            routes: [
                { path: "/", redirect: "/index" },
                {
                    //利用路由的children属性配置子路由
                    path: "/index", component: index,
                    children: [
                        { path: "login", component: login },
                        { path: "register", component: register },
                    ]
                },

            ]
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            router
        })
    </script>
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

# 四,命名视图实现经典布局

  • code:./14.classicLayout.html
    <div id="app">
        <router-view></router-view>
        <div class="content">
            <router-view name="a"></router-view>
            <router-view name="b"></router-view>
        </div>

    </div>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
    <script>
        var header = Vue.component("headerr",{
            template: "<div class='header'>header</div>"
        });
        var left = Vue.component("left",{
            template: "<div class='left'>left</div>"
        });
        var main = Vue.component("mainn",{
            template: "<div class='main'>main</div>"
        });

        var router=new VueRouter({
            routes:[
                {path:"/",components:{
                    default:header,
                    a:left,
                    b:main,
                }}
            ]
        })


        var vm = new Vue({
            el: "#app",
            router
        })
    </script>
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
  • 可以简写
    <div id="app">
        <router-view name="header"></router-view>
        <div class="content">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>

    </div>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
    <script>
        var header ={
            template: "<div class='header'>header</div>"
        }
        var left = {
            template: "<div class='left'>left</div>"
        }
        var main = {
            template: "<div class='main'>main</div>"
        }

        var router=new VueRouter({
            routes:[
                {path:"/",components:{
                    header,
                    left,
                    main
                }}
            ]
        })


        var vm = new Vue({
            el: "#app",
            router
        })
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

# 五,路由传值

  • code:./15.routerPass.html

# 1.hash模式(默认使用)

# 1.query方法:

    <div id="app">

        <router-link to="/login?id=10&name=dongfang">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>

    </div>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
    <script>

        var login={
            template:"<h1>登录 {{$route.query.id}}--{{$route.query.name}}</h1>",
            created(){
                console.log(this.$route)
            }
        }

        var register={
            template:"<h1>注册</h1>"
        }
        var router=new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register},
            ]

        })
        var vm=new Vue({
            el:"#app",
            router
        })
    </script>
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

# 2.params方法:

    <div id="app">
        <router-link to="/login/1/dongfang">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>

    </div>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
    <script>
        var login={
            template:"<h1>登录 {{$route.params.id}}----{{$route.params.name}}</h1>",
            created(){
                console.log(this.$route);
            }
        }
        var register={
            template:"<h1>注册</h1>"
        }
        var router=new VueRouter({
            //需要注意的是用:占位后 ,链接与占位一定要对应,否则报错
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login/:id/:name",component:login},
                {path:"/register",component:register},
            ]
        })
        var vm=new Vue({
            el:"#app",
            router
        })
    </script>
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

  • 对比:query方法无需占位符,使用方便;params方法需要占位符,酷炫好看

  • 综上我选择params!

# 2.history模式

https://router.vuejs.org/zh/guide/essentials/history-mode.html

# 六,动态路由

# 1.与watch监听结合,监听路由对象的改变

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以要使用watch帮助监听!!

  • code:./15.routerPass.html
watch:{
                $route(){
                    console.log(this.$route)
                    if(this.$route.path=="/login")
                    {
                        console.log("登录")
                    }
                }
            }
1
2
3
4
5
6
7
8
9

# 2.导航守卫

略:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

编辑
#基础
vue组件传值
路由机制

← 路由机制 →

最近更新
01
vue自定义指令&生命周期
 08-24
02
ajax
 08-24
03
promise
 08-24
更多文章>
Theme by Vdoing | Copyright © 2019-2020