- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Vue路由

牛哄哄的柯南发表于 2021/05/26 18:04:00 2021/05/26

【摘要】 Vue路由 Vue路由基础嵌套路由路由重定向路由传参params形式传参query形式传参params方式与query方式的区别编程式路由利用JS实现路由跳转通过watch实现路由监听导航守卫 Vue路由基础 Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏...

Vue路由

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

效果截图：

点击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

效果动图：

路由重定向

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

样例代码：

<!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

当我们访问#/时会自动帮我们跳转到#/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

效果动图：

query形式传参

注意：

to属性的值仍然是一个json对象，但是两个属性变了，一个是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

效果动图：

params方式与query方式的区别

query方式传值：

params方式传值：

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

query方式：

类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。

利用路由规则中的path跳转。

params方式：

类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。

利用路由规则中的name跳转。

编程式路由

利用JS实现路由跳转

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

使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。

通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。

如果只想实现前进后退可以使用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

效果动图：

通过watch实现路由监听

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

watch: { // 监听路由跳转。 $route(newRoute, oldRoute) { console.log('watch', newRoute, oldRoute) }
}

  
 
  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

效果动图：

导航守卫

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

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

router.beforeEach((to, from, next) => { // ...
})

  
 
  1
  2
  3
  4
  5

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

to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。

from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。

next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由）。

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

列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面。
当直接进入登录页面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

isLogin = false效果动图：

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

isLogin = true效果动图：

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

看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd

文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。

原文链接：keafmd.blog.csdn.net/article/details/110939043

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

Vue路由

Vue路由

Vue路由基础

嵌套路由

路由重定向

路由传参

params形式传参

query形式传参

params方式与query方式的区别

编程式路由

利用JS实现路由跳转

通过watch实现路由监听

导航守卫

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

Vue路由

Vue路由

Vue路由基础

嵌套路由

路由重定向

路由传参

params形式传参

query形式传参

params方式与query方式的区别

编程式路由

利用JS实现路由跳转

通过watch实现路由监听

导航守卫

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品