Vue第四篇 Vue路由系统

01-路由注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">免费课程</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页组件</h1></div>`
            }
        },
        {
            path: "/course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },

    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url,
    });
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

　　02-路由的命名参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link :to="{name: 'home'}">首页</router-link>
    <router-link :to="{name: 'course'}">免费课程</router-link>
    <!--<router-link to="/user/xiayuhao?age=38">用户</router-link>-->
    <router-link :to="{name: 'user', params: {name: 'xiayuhao'}, query: {age: 38}}">用户</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/xiayuhao",
            name: "home",
            component: {
                template: `<div><h1>这是首页组件</h1></div>`
            }
        },
        {
            path: "/course",
            name: "course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },
        {
            path: "/user/:name",
            // /user/xiayuhao
            // name=xiayuhao
            // (?P<name>.*)
            name: "user",
            component: {
                template: `<div>
                            <h1>这是{{this.$route.params.name}}年龄是{{this.$route.query.age}}用户组件</h1>
                            </div>`,
                mounted(){
                    console.log(this.$route)
                }
            }
        },


    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url
    });
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

　　03-手动路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">免费课程</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/",
            component: {
                template: `<div>
                            <h1>这是首页组件</h1>
                            <button @click="my_click">点击调转到登录页面</button>
                            </div>`,
                methods: {
                    my_click: function () {
                        // 跳转到登录页面 跳转到登录组件
                        console.log(this.$route)
                        console.log(this.$router)
                        console.log(this.$el)
                        console.log(this.$data)
                        // $route 路由的所有信息
                        // $router VueRouter实例化对象
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path: "/course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },
        {
            path: "/login",
            name: 'login',
            component: {
                template: `<div><h1>这是登录组件</h1></div>`
            }
        },

    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url
    });
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

　　04-路由的钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">免费课程</router-link>
    <router-link to="/user">查看用户</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/",
            component: {
                template: `<div>
                            <h1>这是首页组件</h1>
                            <button @click="my_click">点击调转到登录页面</button>
                            </div>`,
                methods: {
                    my_click: function () {
                        // 跳转到登录页面 跳转到登录组件
                        console.log(this.$route)
                        console.log(this.$router)
                        console.log(this.$el)
                        console.log(this.$data)
                        // $route 路由的所有信息
                        // $router VueRouter实例化对象
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path: "/course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },
        {
            path: "/login",
            name: 'login',
            component: {
                template: `<div><h1>这是登录组件</h1></div>`
            }
        },
        {
            path: "/user",
            meta: {
                required_login: true
            },
            name: 'user',
            component: {
                template: `<div><h1>这是用户组件</h1></div>`
            },

        },


    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url,
        mode: 'history'
    });
    router.beforeEach(function (to, from, next) {
        console.log(to) // 你去哪里
        console.log(from) // 你从哪里来
        console.log(next) // 你下一步要做什么
        // if(to.path == "/user"){
        //     next("/login")
        // }
        if(to.meta.required_login){
            next("login")
        }
        next()
    })
    router.afterEach(function (to, from) {
        // 只用于获取你从哪里来的路由信息
    })
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router

    })
</script>

</body>
</html>

　　05-子路由的注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">免费课程</router-link>
    <router-link to="/course/detail">课程详情</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页组件</h1></div>`
            }
        },
        {
            path: "/course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },
        {
            path: "/course/detail",
            redirect: {name: 'brief'},
            component: {
                template: `<div>
                            <h1>这是课程详情组件</h1>
                            <hr>
                            <router-link :to="{name: 'brief'}">课程概述</router-link>
                            <router-link to="/course/chapter">课程章节</router-link>
                            <router-view></router-view>
                            </div>`
            },
            children: [
                {
                    // path: "/course/brief",
                    path: "brief",
                    name: "brief",
                    component: {
                        template: `<div><h1>这是课程概述组件</h1></div>`
                    },
                },
                {
                    path: "/course/chapter",
                    component: {
                        template: `<div><h1>这是课程章节组件</h1></div>`
                    },
                }
            ]
        },
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url
    });
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

　　06-命名的路由视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <style>
        .myfooter {
            position: fixed;
            bottom: 0;
        }

    </style>

</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">免费课程</router-link>
    <router-link to="/user">用户</router-link>
    <router-view name="head" class="myheader"></router-view>
    <router-view name="footer" class="myfooter"></router-view>
    <router-view></router-view>
</div>
<script>
    // 定义路由和组件匹配规则
    let url = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页组件</h1></div>`
            }
        },
        {
            path: "/course",
            component: {
                template: `<div><h1>这是课程组件</h1></div>`
            }
        },
        {
            path: "/user",
            components: {
                head: {
                    template: `<div><h1>这是用户的头部</h1></div>`
                },
                footer: {
                    template: `<div><h1>这是用户的底部</h1></div>`
                }
            }
        },

    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes: url
    });
    // 把VueRouter的实例化对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

　　总结：

Vue的路由	
		注册
			-- 定义一个匹配规则对象
				let url = [
					{
						path: "/",
						component: {
						}
					}
				]
			-- 实例化VueRouter对象 并把匹配规则注册进去
				let router = new VueRouter({
						routes: url
				})
			-- 把VueRouter实例化对象注册Vue的根实例
				const app = new Vue({
					el: "#app",
					router: router
				})
			-- router-link
			-- router-view
		子路由的注册
			-- 在父路由里注册children: [{},{}]
			-- 在父路由对应的组件里的template里
				写router-link  router-view
		路由的命名
			-- name
			-- 注意to一定动态绑定  :to="{name: ''}"
		路由的参数
			this.$route.params.xxxx
			this.$route.query.xxxx
		手动路由
			this.$router.push("/course")
			this.$router.push({name:'', params:{},query: {})
		路由的钩子函数
			router.beforeEach(function(to, from, next){
				to  你去哪里
				from 你从哪里来
				next 你接下来要做什么
			})
			router.afterEach(function(to, from){})
		
		注意  
		    $route  路由的所有信息组成的对象
			$router  VueRouter 实例化对象

相关阅读:
怎样解决git提交代码冲突
 NSDate和NSString相互转换
 AsyncTask源代码翻译
 UVa 11094
JavaScript中的*top、*left、*width、*Height具体解释
 Kali Linux下安装VMware Tools
史上最简单，js并获取手机型号
 界面1
学习向量量化神经网络
 The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Cha
原文地址：https://www.cnblogs.com/cavalier-chen/p/10096737.html