概述
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>
最后
以上就是清爽过客为你收集整理的Vue路由之组件切换Vue路由之组件切换的全部内容，希望文章能够帮你解决Vue路由之组件切换Vue路由之组件切换所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复