Vue路由之组件切换

最新推荐文章于 2024-07-04 09:10:04 发布

@带甜味的盐@

最新推荐文章于 2024-07-04 09:10:04 发布

阅读量5.3k

点赞数 4

分类专栏：前端 SYW 文章标签： Vue路由组件切换

本文链接：https://blog.csdn.net/s_y_w123/article/details/88184213

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

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>

@带甜味的盐@

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
Vue路由之组件切换

Vue路由之组件切换今天我们来简单说一下Vue的路由实现组件之间的切换。利用Vue的路由实现组件之间的切换，大致需要五步走：导入Vue-router.js包创建子组件创建路由对象把路由和我们的VM(view model)关联起来挖坑，引路具体怎么实现，我们结合着代码来简单的说一下：1.导入Vue-router.js包&lt;script src="../lib/vue-2....
复制链接

扫一扫