VueJS路由使用完全解读

在上一节中，我们学习了VueJS自定义指令和过滤器的用法，自定义Vue指令使用Vue.directive，创建过滤器则是在Vue实例的filters中进行创建。本节我们一起来学习VueJS的路由功能，VueJS没有内置的路由特性，我们需要按照一些额外的步骤来安装它。

一、VueJS安装路由vue-router

1、直接从CDN下载vue-router

最新版本的vue-router立即吃瓜为： https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

unpkg.com提供基于npm的cdn链接，上面的链接总是可以获取到最新的版本。我们可以下载并托管它，并将其与vue.js一起使用，如下所示

<script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>

2、使用npm安装

运行以下命令安装vue-router。

npm  install vue-router

3、使用Github

我们可以从GitHub复制这个库，如下所示

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
    cd node_modules/vue-router
    npm install
    npm run build

二、VueJS路由使用实例

下面是一个使用vue-router.js的简单示例。

<div id="app">
        <h1>VueJS路由使用实例</h1>
        <p>
            <router-link to="/route1">路由链接1</router-link>
            <router-link to="/route2">路由链接2</router-link>
        </p>
        <!-- route出口 -->
        <!-- 与路由匹配的组件将在这里渲染 -->
        <router-view></router-view>
    </div>
    <script type="text/javascript">
        const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">这是路由1</div>' }
        const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">这是路由2</div>' }
        const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
        ];
        const router = new VueRouter({
            routes // `routes: routes`的简写
        });
        var vm = new Vue({
            el: '#app',
            router
        });
    </script>

使用路由首先我们需要添加vue-router.js文件。从https://unpkg.com/vue-router/dist/vue-router.js获取代码，并将其保存在vue-router.js文件中。

这里的代码是使用CDN的方式：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

在body部分，有一个路由器链接定义如下

<p>
            <router-link to="/route1">路由链接1</router-link>
            <router-link to="/route2">路由链接2</router-link>
        </p>

<router-link>是一个用于导航到要显示给用户的HTML内容的组件，to属性是目的地，也就是选择要显示内容的源文件。

在上面的代码中，我们创建了两个路由器链接。

查看JS代码部分，其中初始化了路由器，下面创建了两个常量

const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">这是路由1</div>' }
        const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">这是路由2</div>' }
        

这就是当点击router链接时需要显示这些模板。

接下来是route const变量，它定义要在URL中显示的路径。

const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
        ];

路由定义路径和组件，当用户点击路由器链接时，路径即/route1将显示在URL中。

组件接受要显示的模板名称，路由的路径需要与到属性的路由器链接匹配。例如，这里的<router-link to = “path” ></router-link>。

接下来，使用下面的代码段为VueRouter创建实例。

const router = new VueRouter({
            routes // `routes: routes`的简写
        });

VueRouter构造函数将路由作为参数。使用以下代码段将router对象分配给主vue实例。

var vm = new Vue({
            el: '#app',
            router
        });

执行示例并在浏览器中查看效果，在检查路由器链接时，我们会发现它向活动元素添加了类，如下面的截图所示。

添加的类是class = router-link-exact-active router-link-active，活动链接获取类，如上面的截图所示，另一件需要注意的事情是，<router-link>被渲染为一个标记。

三、路由链接的属性

让我们看看更多要传递给<router-link>的属性。

1、to

这是指定<router-link>的目标路径，点击后，to的值将在内部传递给router.push()，该值需要是字符串或location对象。当使用一个对象时，我们需要绑定它，如下例2所示。

例1:  <router-link to = "/route1">路由链接1</router-link>
        渲染为
        <a href = ”#/route”>路由链接</a>
        例2:  <router-link v-bind:to = "{path:'/route1'}">路由链接1</router-link>
        例3: <router-link v-bind:to =
           "{path:'/route1', query: { name: 'Tery' }}">路由链接1</router-link>//使用查询字符串.

2、replace

将replace添加到路由器链接将调用router.replace()而不是router.push()。使用replace时，不会存储导航历史记录，例如：

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>路由链接</router-link>

3、append

<router-link>添加append会使路径变成相对路径。如果我们想从路径为/route1的路由链接转到路径为/route2的路由链接，它会在浏览器中显示路径为/route1/route2，例如：

<router-link v-bind:to = "{ path: '/route1'}" append>路由链接</router-link>

4、tag

一般来说<router-link>会被渲染为一个标签，如果我们想把它渲染成其他的标签，我们需要使用tag = tagname来实现相同的功能，例如：

<p>
        <router-link v-bind:to="{ path: '/route1'}" tag="span">路由连接1</router-link>
        <router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2</router-link>
    </p>

5、active-class

默认情况下，在路由链接处于活动状态时添加的active类是router-link-active。我们可以通过设置与下面代码相同的类来覆盖它。

<style>
        ._active {
            background-color: red;
        }
    </style>
    <p>
        <router-link v-bind:to="{ path: '/route1'}" active-class="_active">路由链接1</router-link>
        <router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2</router-link>
    </p>

6、exact-active-class

默认使用的exactactive类是router-link-exact-active，我们可以使用exact-active-class覆盖它。

<p>
        <router-link v-bind:to="{ path: '/route1'}" exact-active-class="_active">路由链接1</router-link>
        <router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2</router-link>
    </p>

7、event

一般来说，路由链接的默认事件是点击事件，我们可以使用event属性进行相同的更改。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">路由链接1</router-link>