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>
网友评论