Vue路由之组件切换
今天我们来简单说一下Vue的路由实现组件之间的切换。
利用Vue的路由实现组件之间的切换,大致需要五步走:
- 导入
Vue-router.js
包 - 创建子组件
- 创建路由对象
- 把路由和我们的
VM(view model)
关联起来 - 挖坑,引路
具体怎么实现,我们结合着代码来简单的说一下:
1.导入Vue-router.js
包
<script src="../lib/vue-2.5.17/vue-router.js"></script>
这导入包这一步没啥说的,需要注意的一点就是:这个包是依赖于Vue.js的,所以一定要在其之后引入。
顺便给大家说一下这个包下载地址,有需要的可以直接去下载:
Vue-router.js下载,打开网页,直接右键另存为即可。
2.创建子组件
var login = {
template:'<h3>这是登录子组件</h3>'
}
var register = {
template:'<h3>这是注册子组件</h3>'
}
因为要实现组件之间的切换,所以我们创建了一个登陆子组件和注册子组件。
至于怎么创建组件,为什么这么写,我就不多说了,这个不会的可以去先去学习一下组件的知识。
3.创建路由对象
var router = new VueRouter({
routes:[//路由规则数组
{path:'/login',component:login},
{path:'/register',component:register}
]
})
这里需要注意的有两点:
- 路由规则数组里第一个
path
,这个后面的值是一个字符串,简单来说就是匹配的路径,为什么这么说呢?等我说到第五步你就会明白。 - 第二个
component
,这个后面的值可不是字符串了,而是子组件模板的名字,显而易见,当路径匹配上之后,就会匹配后面的组件,进而显示这个组件,所以component
后面一定要跟的是子组件的名称。
创建路由对象,这其实没什么难的,等这五步我展示完,我会进一步的小小拓展一下这个路由对象。
4.把路由和我们的VM关联起来
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router:router,
router
});
和VM关联的时候,我们可以写成router:router
的形式,至于为什么写成一个router
也行呢?
给大家简单提一下:
JavascriptES6中对JSON数组有一个简写,即:当JSON数组中键和值【key和value】一致时,可以省略value,只写一个key即可。
5.挖坑,引路
看到这两个名字,大家不要蒙,其实我感觉我起的还是挺形象的:
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 容器 -->
<router-view></router-view>
</div>
前面的一系列步骤我们做完之后,剩下的就是显示组件,点击响应的按钮切换组件了。
- 显示组件我们需要在VM控制的区域给设置一个容器:
<router-view></router-view>
让其有地方显示。 - 显示完之后,我们需要让它知道我们点击那个超链接,所以我们需要给它引路:
<router-link to=""></router-link>
。 to=""
后面写的就是路由规则数组里的path
后面的路径,这两个是匹配的,这就说明了我在第三步的问题。
总结一下实现切换的步骤:
- 比如我们在页面上点击登录超链接。
- 点击之后,就会根据
to=""
后面所写的地址在路由中进行匹配。 - 匹配成功之后,就去找
component
后面的组件模板名字所对应的模板。 - 找到这个模板,然后显示这个模板。
扩展
小问题:
- 我们在打开浏览器,没有点击按钮的时候,页面上是不显示组件的,只显示两个超链接。
- 这个是不合理的,用户使用网站,一进来的时候我们就应该显示登录组件,用户注册账号时点击注册超链接,然后切换组件,这样才是合理的。
- 所以,我们怎么让页面一开始就显示我们的登录组件呢?
方法:路由的重定向
var router = new VueRouter({
routes:[//路由规则数组
{path:'/',redirect:'/login'},//重定向
{path:'/login',component:login},
{path:'/register',component:register}
]
})
和我们上面写的基本一致,不过是把component
换成了redirect
【重定向】。
- 理解起来其实也简单,当我们最初进入没有点击任何超链接时,
url
路径里#
后面显示的就是一个"/"。
- 这样的路径我们显然没有任何一个路径和其相匹配的。
- 但是我们对其做了处理,当我们的路由一匹配到
"/"
,立刻就重定向,即把"/"
改成"/login"
. - 这样,再进行匹配时,我们匹配的就是
"/login"
,对应的正好是我们的登录组件。
需要注意的是:redirect
重新向后面跟的是字符串,是我们的路径,可不是字符串模板名称。
以上就是利用路由简单实现组件之间的切换了,给大家展示一下完整的代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue-2.5.17/vue.js"></script>
<!-- 1.导入包 -->
<script src="../lib/vue-2.5.17/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 容器 -->
<router-view></router-view>
</div>
</body>
<script>
// 2.创建子组件
var login = {
template:'<h3>这是登录子组件</h3>'
}
var register = {
template:'<h3>这是注册子组件</h3>'
}
// 3.创建一个路由对象
var router = new VueRouter({
routes:[//路由规则数组
{path:'/',redirect:'/login'},//重定向
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router:router,
router
});
</script>
</html>