Vue路由的配置

2020-12-14 本文已影响0人暖A暖

Vue 路由的配置

什么是路由

Vue 路由是可以通过组件的形式把所有的组件组装成为一个应用程序，当我们需要的时候，将这个组件映射到路由，然后告诉 Vue 我们在哪里渲染它们。路由其实就是我们浏览器的一个地址。

Vue 路由的优缺点

路由的优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户。

路由的缺点：

不利于 SEO。
使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存。
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。

当我们加载一个程序时，由于它加载的内容特别多，所以会比较缓慢，但是我们加载完之后，我们到页面里进行切换，它的切换速度会变得特别快。原因是因为我们将所有的程序都放在一个页面里面了，我们将它加载时所有的功能所有的主键都加载到一个页面去了，所以它加载的速度特别慢，但是加载完之后我们再进行后续的操作时，它的切换速度和反应速度会特别快。

路由的安装

Vue.js 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue.js 可以实现多视图的单页 Web 应用，对于大多数单页应用程序，建议使用官方支持的 vue-router 库。

我们可以直接下载路由的 vue-router.js 文件，下载地址：http://unpkg.com/vue-router/dist/vue-router.js。

下载后引入到页面中：

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

使用 npm 命令安装路由：

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

路由的使用

我们首先引入要使用到的文件：

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

然后在 Js 中定义组件，下面分别定义了两个名为 Java 和 Python 的组件，template 是模板内容：

const Java = { template: '<span>java</span>' }
const Python = { template: '<span>Python</span>' }

然后定义路由，每个路由应该映射一个组件，例如：

const routes = [
    { path: '/java', component: Java },
    { path: '/python', component: Python }
]

创建路由实例，将定义好的路由添加到实例中：

const router = new VueRouter({
    routes 
})

最后创建 Vue 实例，通过 router 配置参数注入路由：

const app = new Vue({
    el:'#app',
    router  // 通过 router 配置参数注入路由
})

HTML 部分，<router-link> 组件支持用户在具有路由功能的应用中(点击) 导航，to 属性指定目标地址。<router-view> 组件用来渲染通过路由映射过来的组件，当路径更改时组件中的内容也会发生改变：

<div id="app">   
    <p>
        <router-link to="/java">Java</router-link>
        <router-link to="/python">Python</router-link>
    </p>
    <div>我喜欢：<router-view></router-view></div>
</div>

整合后的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
<script src="./src/vue-router.js"></script>
</head>
<body>
    <div id="app">   
        <p>
            <router-link to="/java">Java</router-link>
            <router-link to="/python">Python</router-link>
        </p>
        <div>我喜欢：<router-view></router-view></div>
    </div>
    <script>
        // 定义组件
        const Java = { template: '<span>java</span>' }
        const Python = { template: '<span>Python</span>' }
        
        // 定义路由, 每个路由应该映射一个组件
        const routes = [
            { path: '/java', component: Java },
            { path: '/python', component: Python }
        ]
        // 创建 router 实例
        const router = new VueRouter({
            routes 
        })
        // 创建和挂载根实例
        const app = new Vue({
            el:'#app',
            router  // 通过 router 配置参数注入路由
        })
    </script>
</body>
</html>

在浏览器中演示效果：

router-link的相关属性

<router-link> 组件的相关属性，有如下所示：

to 属性：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
replace 属性：设置了 replace 属性，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="/path" replace></router-link>

append 属性：设置 append 属性，则在当前 (相对) 路径前添加基路径。例如我们从 /src 导航到一个相对路径 index，如果没有配置 append，则路径为 /index，如果配了，则为 /src/index。

<router-link :to="/path" append></router-link>

tag属性：可以使用此属性将 <router-link> 渲染成某种标签，例如将之渲染成按钮，可以像下面这样写：

<router-link to="/java" tag="button">Java</router-link>

active-class属性：设置链接激活时使用的 CSS 类名（也就是使用 active-class 代替 class）。例如有一个类样式 _active，要在组件上设置这个样式，如下所示：

<router-link :to="/path" active-class = "_active">Java</router-link>

event属性：声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。例如下面这个表示当鼠标移动到 Java 上时，HTML 内容发生改变：

<router-link :to="/path" event = "mouseover">Java</router-link>