Vue.js 学习笔记十三：Vue Router 之基本使用

目录

基本使用

创建路由页面组件

配置路径的映射关系

使用路由

HTML5 的 history 模式

<router-link> 标签属性

---

基本使用

创建路由页面组件

/src/views/home.vue

<template>
	<div>
		<h2>我是首页的标题</h2>
		<p>我是首页的内容</p>
	</div>
</template>

<script>
	export default {
		name: 'home'
	}
</script>

<style>
</style>

/src/views/about.vue

<template>
	<div>
		<h2>我是关于的标题</h2>
		<p>我是关于的内容</p>
	</div>
</template>

<script>
	export default {
		name: 'about'
	}
</script>

<style>
</style>

配置路径的映射关系

/src/router/index.js

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

import Home from '../views/home'
import About from '../views/about'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  	routes
})

export default router

使用路由

/src/App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link> |
    <router-link to="/about">关于</router-link>
    <router-view/>
    <div>我是版权信息</div>
  </div>
</template>

<style>
</style>

<router-link>：该标签是一个 vue-router 中已经内置的组件，它会被渲染成一个 <a> 标签。

<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和 <router-view> 处于同一个等级。

在路由切换时，切换的是 <router-view> 挂载的组件，其他内容不会发生改变。

 

HTML5 的 history 模式

我们前面说过改变路径的方式有两种：URL 的 hash 和HTML5 的 history。默认情况下，路径的改变使用的 URL 的hash。如果希望使用 HTML5 的 history 模式， 非常简单， 进行如下配置即可：

 

const router = new VueRouter({
  	routes,
 	mode: 'history'	
})

 

<router-link> 标签属性

在前面的 <router-link> 中，我们只是使用了一个属性to，用于指定跳转的路径。 下面介绍一些常用的属性。

to

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="/home">首页</router-link>
<!-- 渲染结果 -->
<a href="/home">首页</a>

replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

 <router-link to="/home" replace>首页</router-link>

tag

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/home" tag="li">首页</router-link>

active-class

设置链接激活时，会自动给当前元素设置一个 router-link-active 的 class。

<a href="/home" class="router-link-exact-active router-link-active">首页</a>

默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

const router = new VueRouter({
  	routes,
	mode: 'history',
	linkActiveClass: 'active'	
})

渲染后：

<a href="/home" class="router-link-exact-active active">首页</a>