vue路由route的两种跳转方式

在了解路由之前，我们知道的跳转方式有a标签跳转，点击事件处理跳转等，这些都是跳转到新页面的。了解路由后，会学到一种新的本页面跳转方式，即路由跳转，本文主要介绍路由的两种跳转方式。

1、准备如下：引入vuejs、CDN引入vue、路由；写渲染区域；实例化一个vue。

<!-- 引入vue.js 最基本的 放在最前面 -->
    <script src="vue.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入vue.router -->
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

2、注册全局组件，在组件模板中写入内容。

// 创路由组件
    let Home = Vue.component("Home",{
        template:`<div class="contain">主页</div>`,
    })

3、写路由映射表。

// 创建路由表：url映射对应组件
    let routes = [
        {
            path: "/home",
            component:Home
        },
    ]

4、创建路由管理器。

// 创路由管理
    const router = new VueRouter({
        // 路由表属性
        routes:routes
    })

5、将路由管理器放入vue实例中。

// 将路由管理器放入vue实例中
        router:router

6、路由的声明式跳转，在渲染区域放入router-link标签并在标签的to属性里写路由映射表里的路径、放入跳转内容显示区域，然后运行代码点击标签内容就可以实现跳转。

<div class="nav">
            <!-- 路由跳转链接 根据url路径将指定的组件放在路由容器中 -->
            <router-link to="/home" class="home">主页</router-link>
        </div>
        <div class="contain">
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>

7、路由的编程式跳转，1）在渲染区域放入一个盒子并给盒子添加点击事件、放入跳转内容显示区域。

<div class="nav">
            <div class="home" @click="goHome">主页</div>
        </div>
        <div class="contain1">
            <router-view></router-view>
        </div>

 2）在vue实例的方法中写goHome方法处理点击事件。这里用this.$router.push将路由映射表里的路径写入，实现点击盒子跳转。

methods: {
            goHome(){
                this.$router.push("/home");
            },  
        }

两种方式运行后点击跳转显示注册组件中的模板内容，效果如下：

 

至此，路由跳转的两种方式就介绍完了，从代码上来看，声明式跳转是更简单简洁的。编程式较麻烦一点。但是编程式会比声明式灵活一点。