Vue路由之组件切换

今天我们来简单说一下Vue的路由实现组件之间的切换。

利用Vue的路由实现组件之间的切换,大致需要五步走:

  1. 导入Vue-router.js
  2. 创建子组件
  3. 创建路由对象
  4. 把路由和我们的VM(view model)关联起来
  5. 挖坑,引路

具体怎么实现,我们结合着代码来简单的说一下:

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}
        ]
    })

这里需要注意的有两点:

  1. 路由规则数组里第一个path,这个后面的值是一个字符串,简单来说就是匹配的路径,为什么这么说呢?等我说到第五步你就会明白。
  2. 第二个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>
Logo

前往低代码交流专区

更多推荐