Vue简明实用教程(15)——Vue的路由
Posted 谷哥的小弟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue简明实用教程(15)——Vue的路由相关的知识，希望对你有一定的参考价值。
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
Vue Router概述
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。通俗地来说：使用Vue Router可以将现有Vue开发变得更加灵活，它可依据前端请求url在页面展示不同的组件。
Vue Router使用步骤
在此，概括Vue Router的使用步骤。
第一步
请下载vue-router.js并在页面中引入，代码如下：
<!-- 引入vue-router -->
<script src="路径/vue-router.js"></script>
第二步
请开发组件
第三步
创建Vue Router实例，该实例用于配置路由规则。
语法如下：
const vueRouter = new VueRouter(
routes:[
path:'/',redirect:'/路径',
path:'/路径1',component:组件1,
path:'/路径2',component:组件2,
path:'/...',component:...,
path:'/*',component:错误提醒组件,
]
);
第四步
在Vue实例中注册路由。
语法如下：
new Vue(
el: ,
data:
,
methods:
,
computed:
,
components:
,
// 注册路由
router:Vue Router实例的名称
);
第五步
在页面中使用router-view标签依据不同的url显示不同的组件。
语法如下：
<router-view></router-view>
Vue Router入门示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<!-- 引入vue-router -->
<script src="js/vue-router.js"></script>
<script type="text/javascript">
// 登录组件
let login=
template:'<div><h2>这是登录组件</h2></div>'
;
// 注册组件
let register=
template:'<div><h2>这是注册组件</h2></div>'
;
// 错误提醒组件
let error=
template:'<div><h2>Sorry,Not Found</h2></div>'
;
// 创建Vue Router实例定义路由规则
const vueRouter = new VueRouter(
routes:[
path:'/',redirect:'/login',// 以/结尾的路径显示login组件
path:'/login',component:login,// 以/login结尾的路径显示login组件
path:'/register',component:register,// 以/register结尾的路径显示register组件
path:'*',component:error,// 除以上三种之外的路径均显示error组件
]
);
// 声明Vue的实例
let vueInstance = null;
// 入口函数
window.onload = function ()
// 初始化Vue实例
vueInstance = new Vue(
el: "#div1",
data:
name: "谷哥的小弟"
,
methods:
,
computed:
,
components:
,
// 注册路由
router:vueRouter
);
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<h3>name</h3>
<hr/>
<!--超链接路径格式：#/路径-->
<a href="#/login">用户登录</a>
<a href="#/register">用户注册</a>
<!--用于显示路由组件的标签router-view-->
<router-view></router-view>
</div>
</body>
</html>
Vue Router路由切换基本使用
在刚才的示例中我们使用超链接的按时切换了路由。除此以外，我们还可以利用router-link标签或者JavaScript代码切换路由。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<!-- 引入vue-router -->
<script src="js/vue-router.js"></script>
<script type="text/javascript">
// 登录组件
let login=
template:'<div><h2>这是登录组件</h2></div>'
;
// 注册组件
let register=
template:'<div><h2>这是注册组件</h2></div>'
;
// 错误提醒组件
let error=
template:'<div><h2>Sorry,Not Found</h2></div>'
;
// 创建Vue Router实例定义路由规则
const vueRouter = new VueRouter(
routes:[
path:'/',redirect:'/login',
//为路由设置name属性指定路由对象名
name:"loginRoute",path:'/login',component:login,
//为路由设置name属性指定路由对象名
name:"registerRoute",path:'/register',component:register,
path:'*',component:error,
]
);
// 处理多次切换相同路由的异常
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location)
return originalPush.call(this, location).catch(err => err)
;
// 声明Vue的实例
let vueInstance = null;
// 入口函数
window.onload = function ()
// 初始化Vue实例
vueInstance = new Vue(
el: "#div1",
data:
name: "谷哥的小弟"
,
methods:
toLogin1()
// 使用路径名切换路由的简写形式
this.$router.push('/login');
,
toRegister1()
// 使用路径名切换路由的简写形式
this.$router.push('/register');
,
toLogin2()
// 使用路径名切换路由的完整写法
this.$router.push(path:'/login');
,
toRegister2()
// 使用路径名切换路由的完整写法
this.$router.push(path:'/register');
,
toLogin3()
// 使用路由对象切换路由
this.$router.push(name:'loginRoute');
,
toRegister3()
// 使用路由对象切换路由
this.$router.push(name: 'registerRoute');
,
computed:
,
components:
,
// 注册路由
router:vueRouter
);
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<h3>name</h3>
<hr/>
<h2>利用router-link切换路由</h2>
<!--使用路径名切换路由的简写形式-->
<router-link to="/login">用户登录</router-link>
<router-link to="/register">用户注册</router-link>
<br/><br/>
<!--使用路径名切换路由的完整写法-->
<router-link :to="path:'/login'">用户登录</router-link>
<router-link :to="path:'/register'">用户注册</router-link>
<br/><br/>
<!--使用路由对象切换路由-->
<router-link :to="name:'loginRoute'">用户登录</router-link>
<router-link :to="name:'registerRoute'">用户注册</router-link>
<br/> <br/>
<router-view></router-view>
<hr/>
<h2>利用JavaScript切换路由</h2>
<button @click="toLogin1">用户登录</button>
<button @click="toRegister1">用户注册</button>
<br/> <br/>
<button @click="toLogin2">用户登录</button>
<button @click="toRegister2">用户注册</button>
<br/> <br/>
<button @click="toLogin3">用户登录</button>
<button @click="toRegister3">用户注册</button>
<br/> <br/>
</div>
</body>
</html>
Vue Router路由切换与参数传递
在切换路由时经常需要传递参数。故，在此利用router-link标签为例讲解路由切换时传递参数。
参数传递的两种方式：
- 1、利用queryString传递参数。此时，router-link标签中使用
query传参或直接在路径中拼接参数，组件中使用this.$route.query.参数名获取参数值 - 2、利用RESTful风格传递参数。此时，router-link标签中使用
params传参或直接在路径中拼接参数，组件中使用this.$route.params.参数名获取参数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<!-- 引入vue-router -->
<script src="js/vue-router.js"></script>
<script type="text/javascript">
// 登录组件
let login=
template:'<div><h2>这是登录组件</h2></div>',
created()
console.log(this.$route);
console.log(this.$route.query);
// 接收路由切换时利用queryString传递的参数
let c = this.$route.query.city;
let n = this.$route.query.number;
alert(c+" "+n);
;
// 注册组件
let register=
template:'<div><h2>这是注册组件</h2></div>',
created()
console.log(this.$route);
console.log(this.$route.params);
// 接收路由切换时利用RESTful风格传递的参数
let c = this.$route.params.city;
let n = this.$route.params.number;
alert(c+" "+n);
;
// 错误提醒组件
let error=
template:'<div><h2>Sorry,Not Found</h2></div>'
;
// 创建Vue Router实例定义路由规则
const vueRouter = new VueRouter(
routes:[
path:'/',redirect:'/login',
//为路由设置name属性指定路由对象名
name:"loginRoute",path:'/login',component:login,
//为路由设置name属性指定路由对象名并在path预留参数占位
name:"registerRoute",path:'/register/:city/:number',component:register,
path:'*',component:error,
]
);
// 处理多次切换相同路由的异常
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location)
return originalPush.call(this, location).catch(err => err)
;
// 声明Vue的实例
let vueInstance = null;
// 入口函数
window.onload = function ()
// 初始化Vue实例
vueInstance = new Vue(
el: "#div1",
data:
name: "谷哥的小弟"
,
methods:
,
computed:
,
components:
,
// 注册路由
router:vueRouter
);
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
&以上是关于Vue简明实用教程(15)——Vue的路由的主要内容，如果未能解决你的问题，请参考以下文章