注册    登录
今天看啥  ›  专栏  ›  牛哄哄的柯南

Vue路由

牛哄哄的柯南  · CSDN  ·  · 2020-12-09 22:16

Vue路由

Vue路由基础

Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。
在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。

样例代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>


	</head>
	<body>
		<div id="app">
			<router-link to="/home">home</router-link>
			<router-link to="/news">news</router-link>

			<router-view></router-view>

		</div>


		<script>
			const Home = {
				template: '<div>首页</div>'
			}
			const News = {
				template: '<div>新闻</div>'
			}

			var router = new VueRouter({
				// mode: 'hash',
				mode: 'history',
				routes: [{
					path: '/home',
					component: Home
				}, {
					path: '/news',
					component: News
				}]
			});



			var vm = new Vue({
				el: '#app',
				data: {},
				// 将路由添加到Vue中
				router,
			});
		</script>

	</body>
</html>
  • 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
  • 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

效果截图：

点击home时：

在这里插入图片描述

点击new时：

在这里插入图片描述

嵌套路由

实际应用界面，通常由多层嵌套的组件组合而成。 比如，我们 “新闻”组件中，还嵌套着 “国内”和 “国际”组件，那么URL对应就是/news/guonei和/news/guoji。
样例代码： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>


    </head>
    <body>
        <div id="app">
            <p>
                <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                <router-link to="/home">home</router-link>
                <router-link to="/news">news</router-link>
            </p>
            <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
            <router-view></router-view>
        </div>


        <script>
            // 1. 定义（路由）组件。
            const Home = {
                template: `<div>首页</div>`
            }

            const News = {
                template: `<div>
                    <p>
                        <router-link to="/news/guonei">国内新闻</router-link>
                        <router-link to="/news/guoji">国际新闻</router-link>
                    </p>
                    <router-view></router-view>
                </div>`
            }

            const GuoNeiNews = {
                template: `<div>这里显示国内新闻</div>`
            }
            const GuoJiNews = {
                template: `<div>这里显示国际新闻。。。。</div>`
            }

            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [{
                    path: '/home',
                    component: Home,
                }, {
                    path: '/news',
                    component: News,
                    children: [{
                            path: '/news/guonei',
                            component: GuoNeiNews
                        }, {
                            path: '/news/guoji',
                            component: GuoJiNews
                        }

                    ]
                },


            ]

            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })

            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>

    </body>
</html>
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

效果动图：
在这里插入图片描述

路由重定向

路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径，也就相当于让你的数据走另外一条路到服务器。

样例代码： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>


    </head>
    <body>
        <div id="app">
            <p>
                <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                <router-link to="/home">home</router-link>
                <router-link to="/news">news</router-link>
            </p>
            <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
            <router-view></router-view>
        </div>


        <script>
            // 1. 定义（路由）组件。
            const Home = {
                template: `<div>首页</div>`
            }

            const News = {
                template: `<div>
                    <p>
                        <router-link to="/news/guonei">国内新闻</router-link>
                        <router-link to="/news/guoji">国际新闻</router-link>
                    </p>
                    <router-view></router-view>
                </div>`
            }

            const GuoNeiNews = {
                template: `<div>这里显示国内新闻</div>`
            }
            const GuoJiNews = {
                template: `<div>这里显示国际新闻。。。。</div>`
            }


            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [
                /* {
                    path:'/',
                    redirect:'/home'
                }, */
                {
                    path: '/',
                    redirect: {
                        name: 'MyHome'
                    }
                },
                {
                    path: '/home',
                    name: 'MyHome',
                    component: Home,
                }, {
                    path: '/news',
                    component: News,
                    children: [{
                            path: '/news/guonei',
                            component: GuoNeiNews
                        }, {
                            path: '/news/guoji',
                            component: GuoJiNews
                        }


                    ]
                },


            ]

            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })

            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>

    </body>
</html>
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96

当我们访问 #/ 时会自动帮我们跳转到 #/home 这也就是重定向。

效果截图：
在这里插入图片描述

路由传参

路由传参有多种方式，常用的有两种：params与query。

params形式传参

注意：

  • 使用v-bind绑定to属性。
  • to属性的值是一个json对象，此对象有两个属性：name属性和params属性。
  • name属性就是要路由的对象。所以，在路由规则列表中，每一个路由规则都应用有一个name值。
  • params属性就是要传递的参数。也是一个json对象。
  • 组件接收参数时，使用 this.$route.params.参数名 的形式。

样例代码： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>


    </head>
    <body>
        <div id="app">
            <p>
                <router-link :to="{name:'News',params:{msg:'国内'}}">点击这里会把国内传过去</router-link>
            </p>

            <router-view></router-view>
        </div>


        <script>
            const News = {
                data(){
                    return {
                        msg:''
                    }
                },
                template: `<div> {{msg}}新闻</div>`,
                created(){
                    this.msg = this.$route.params.msg;
                    console.log(this.$route.params)
                }
            }


            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [
                {
                    path: '/news',
                    name: 'News',
                    component: News,
                }
            ]

            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })

            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>

    </body>
</html>
  • 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
  • 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

效果动图：
在这里插入图片描述

query形式传参

注意：

  • to属性的值仍然是一个josn对象，但是两个属性变了，一个是path，一个是query。
  • path属性就是路由地址，对应路由规则中的path值。
  • query属性就是要传递的参数。也是一个json对象。
  • 组件接收参数时，使用 this.$route.query.参数名 的形式。

样例代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <p>
		        <router-link :to="{path:'/home',query:{msg:'hello world!'}}">home</router-link>
		        <router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link>
		    </p>
		    <router-view></router-view>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
		
		<script type="text/javascript">
		    const Home = {
		        template: '<div>首页内容： {{this.$route.query.msg}} </div>'
		    }
		    const News = {
		        template: `<div>新闻 </br>
		                        参数id：{{this.$route.query.id}}</br>
		                        参数name：{{this.$route.query.name}}
		                    </div>`
		    }
		
		    const routes = [{
		        path: '/home',
		        component: Home
		    }, {
		        path: '/news',
		        component: News
		    }]
		
		    const router = new VueRouter({
		        routes
		    })
		
		    var vm = new Vue({
		        el: '#app',
		        data: {
		            id:666,
		            name:'Keafmd'
		        },
		        router
		    })
		</script>
	</body>
</html>
  • 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
  • 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

效果动图：
在这里插入图片描述

params方式与query方式的区别

query方式传值：
在这里插入图片描述
params方式传值：
在这里插入图片描述

总结：params方式与query方式的区别：

  1. query方式：
  • 类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。
  • 利用路由规则中的path跳转。
  1. params方式：
  • 类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。
  • 利用路由规则中的name跳转。

编程式路由

利用JS实现路由跳转

router-link标签可以实现页面超链接形式的路由跳转。但是实际开发中，在很多情况下，需要通过某些逻辑判断来确定如何进行路由跳转。也就是说：需要在js代码中进行路由跳转。此时可以使用编程式路由。

  1. 使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。
  2. 通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。
  3. 如果只想实现前进后退可以使用this.$router.forward()（前进一页），以及this.$router.back()（后退一页）。

样例代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <p>
		        <button @click="toHome">首页</button>
		        <button @click="toNews">新闻</button>
		        <button @click="toLogin">登陆</button>
		        <button @click="doForward1">前进</button>
		        <button @click="doForward2">前进</button>
		        <button @click="doBack1">后退</button>
		        <button @click="doBack2">后退</button>
		    </p>
		    <router-view></router-view>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
		
		<script type="text/javascript">
		    const Home = {
		        template: '<div>首页</div>'
		    }
		    const News = {
		        template: '<div>新闻</div>'
		    }
		    const Login = {
		        template: '<div>登陆</div>'
		    }
		
		    const routes = [{
		        path: '/',
		        component: Home
		    }, {
		        path: '/home',
		        component: Home
		    }, {
		        path: '/news',
		        component: News
		    }, {
		        path: '/login',
		        component: Login
		    }]
		
		    const router = new VueRouter({
		        routes
		    })
		
		    var vm = new Vue({
		        el: '#app',
		        data: {},
		        router,
		        methods:{
		            toHome(){
		                //无参数时，push方法中直接写路由地址
		                this.$router.push('/home');
		            },
		            toNews(){
		                //有参数时，push方法中写一个json对象
		                this.$router.push({path:'/news',query:{name:'zhangsan'}});
		            },
		            toLogin(){
		                this.$router.push('/login');
		            },
		            doForward1(){
		                this.$router.forward();
		            },
		            doForward2(){
		                this.$router.go(1);
		            },
		            doBack1(){
		                this.$router.back();
		            },
		            doBack2(){
		                this.$router.go(-1);
		            }
		        }
		    })
		</script>
	</body>
</html>
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86

效果动图：
在这里插入图片描述

通过watch实现路由监听

通过watch属性设置监听$route变化，达到监听路由跳转的目的。
在上面代码中添加watch监听： 

watch: {
    // 监听路由跳转。
    $route(newRoute, oldRoute) {
        console.log('watch', newRoute, oldRoute)
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

完整代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <p>
		        <button @click="toHome">首页</button>
		        <button @click="toNews">新闻</button>
		        <button @click="toLogin">登陆</button>
		        <button @click="doForward1">前进</button>
		        <button @click="doForward2">前进</button>
		        <button @click="doBack1">后退</button>
		        <button @click="doBack2">后退</button>
		    </p>
		    <router-view></router-view>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
		
		<script type="text/javascript">
		    const Home = {
		        template: '<div>首页</div>'
		    }
		    const News = {
		        template: '<div>新闻</div>'
		    }
		    const Login = {
		        template: '<div>登陆</div>'
		    }
		
		    const routes = [{
		        path: '/',
		        component: Home
		    }, {
		        path: '/home',
		        component: Home
		    }, {
		        path: '/news',
		        component: News
		    }, {
		        path: '/login',
		        component: Login
		    }]
		
		    const router = new VueRouter({
		        routes
		    })
			
			
		
		    var vm = new Vue({
		        el: '#app',
		        data: {},
		        router,
		        methods:{
		            toHome(){
		                //无参数时，push方法中直接写路由地址
		                this.$router.push('/home');
		            },
		            toNews(){
		                //有参数时，push方法中写一个json对象
		                this.$router.push({path:'/news',query:{name:'zhangsan'}});
		            },
		            toLogin(){
		                this.$router.push('/login');
		            },
		            doForward1(){
		                this.$router.forward();
		            },
		            doForward2(){
		                this.$router.go(1);
		            },
		            doBack1(){
		                this.$router.back();
		            },
		            doBack2(){
		                this.$router.go(-1);
		            }
		        },
				watch: {
				    // 监听路由跳转。
				    $route(newRoute, oldRoute) {
				        console.log('watch', newRoute, oldRoute)
				    }
				}
		    })
		</script>
	</body>
</html>
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94

效果动图：
在这里插入图片描述

导航守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供了实现导航守卫（navigation-guards）的功能。
你可以使用 router.beforeEach 注册一个全局前置守卫： 

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    // ...
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

每个守卫方法接收三个参数：

  1. to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。
  2. from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。
  3. next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由）。

下面例子中实现了如下功能：

  1. 列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面。
  2. 当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage。

样例代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
		    <p>
		        <router-link to="/home">home</router-link>
		        <router-link to="/news">news</router-link>
		        <router-link to="/music">music</router-link>
		        <router-link to="/login">login</router-link>
		    </p>
		    <router-view></router-view>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
		
		<script type="text/javascript">
		    const Home = {
		        template: '<div>首页</div>'
		    }
		    const News = {
		        template: '<div>新闻</div>'
		    }
		    const Music = {
		        template: '<div>音乐</div>'
		    }
		    const Login = {
		        template: '<div>登录</div>'
		    }
		
		    const routes = [{
		        path: '/',
		        component: Home
		    }, {
		        path: '/home',
		        component: Home
		    }, {
		        path: '/news',
		        component: News
		    }, {
		        path: '/music',
		        component: Music
		    }, {
		        path: '/login',
		        component: Login
		    }]
		
		    const router = new VueRouter({
		        routes // （缩写）相当于 routes: routes
		    })
		
		    var vm = new Vue({
		        el: '#box',
		        data: {},
		        router
		    })
		
		    // 添加全局路由守卫
		    router.beforeEach((to, from, next) => {
		        //创建守卫规则集合(这里表示'/news'与'/music'路径是需要权限验证的)
		        const nextRoute = ['/news', '/music'];
		        // 使用isLogin来模拟是否登录
		        let isLogin = false;
		        // let isLogin = true;
		        // 判断to.path(要跳转的路径)是否是需要权限验证的
		        if (nextRoute.indexOf(to.path) >= 0) {
		            if (!isLogin) {
		                router.push({
		                    path: '/login'
		                })
		                location.reload(); //必须要有
		            }
		        }
		        // 已登录状态；当路由到login时，跳转至home
		        if (to.path === '/login') {
		            if (isLogin) {
		                router.push({
		                    path: '/home'
		                });
		                location.reload();
		            }
		        }
		        next(); //必须要有
		    });
		</script>
	</body>
</html>
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 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
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92

isLogin = false效果动图：
在这里插入图片描述

我们可以看出当我们点击 news 和 music 时，因为isLogin = false，所以会自动跳转到 login 界面。

isLogin = true效果动图：
在这里插入图片描述

我们可以看出当我们点击 news 和 music 时，因为isLogin = true，所以会显示相应的界面。

看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “ 一键三连 ” 了吗，没错点它[哈哈]
在这里插入图片描述
加油！

共同努力！

Keafmd




原文地址：访问原文地址
快照地址： 访问文章快照
推荐文章
环保人  ·  免费危废称重、打印标签！三合一打印机1000，100mm的300左右，物联网功能免费
23 小时前
环保人  ·  免费危废称重、打印标签！三合一打印机1000，100mm的300左右，物联网功能免费
昨天
环保人  ·  危废库VOCs源强算法复杂，有没有简易方法？有根有据哦
昨天
环保人  ·  塑粉中聚合物含量高，属于低VOCs原料吗？请看术语定义和官方明确依据
昨天
环保人  ·  属于危废的废包装桶是否能用于装其它危废？请看法律明确规定和官方明确答复
昨天
小胖看房  ·  内外兼修！大虹桥徐泾约55万方城市更新作品，俊灿星城三期约70-130㎡高品质超低能耗住宅加推在即！
1 年前
云无心702  ·  【都市情感】只有两个人的朋友圈（164）
5 年前
书香藏馆  ·  The Economist 第20180630期
6 年前
中扑网  ·  【倒计时2天】“日月同辉，普照京城”北京杯-皇城五坛系列赛之日月坛杯耀世登场
6 年前
集微网  ·  今天:iPhone上市届满10周年,苹果营收居全球IT公司之首；分析师确认OPPO Find 9在研；小米6无故死机?小米回应
7 年前
关于   移动版   ·   Py中国   ·   RSS之家   ·   codingpro   ·   Code   ·   link之家   ·   卧龙AI搜索   ·   藏经阁   ·   小百科
今天看啥 - 微信公众号rss订阅, 微信rss, 稳定的RSS源
© 2024 ~ 沪ICP备11025650号