vue-router的基本框架及写法，router-view与router-link

一.安装和使用vue-router

步骤一：安装vue-router:npm install vue-router --save
步骤二：在模块化工程中使用它

如果使用Vuecli脚手架，在配置时选择安装，则我们可以在src文件夹中找到router文件夹，并且其中会包含index.js文件，在这个js文件中，我们将配置所有的路由相关的信息

1.搭建路由框架

• 第一步：导入路由对象，并且调用Vue.use(VueRouter)
• 第二步：创建路由实例，并且传入路由映射配置
• 第三步：在Vue实例中挂载创建的路由实例

首先在router文件夹下的index.js中配置路由相关的信息
 import VueRouter from 'vue-router'
 import Vue from 'vue'

// 1.通过vue.use(插件)，安装插件
Vue.use（VueRouter）

// 2.创建VueRouter对象
const routes = [

]
const router = new VueRouter({
     
	// 配置路由和组件之间的映射关系
	routes  // ES6的增强写法
})

// 3.将router对象传到Vue实例中
export default router

接下来在main.js的Vue实例中将路由实例挂载
new Vue({
     
	el:'#app',
	router, // ES6的增强写法，相当于router:router
	render:h=>h(App)
})

2.配置路由和组件之间的映射关系

一个映射关系就是一个对象

• 第一步：创建路由组件，因为一个地址对应一个路由组件，所以必须要先创建路由组件
• 第二步：配置路由映射：组件和路径映射关系
• 第三步：使用路由：通过和,
• router-link可以生成一个可以点击的文字，最终会默认渲染成a标签，与to一起使用
• 而router-view相当于一个占位的作用，决定跳转后的内容显示在link的上方或下方

首先在components文件夹中创建.vue文件，即路由组件,创建完成后，需要在router文件夹下的index.js中导入
//index.js文件
import Home from '../components/Home'  // 这里注意当前是index.js文件，所以去到components文件夹要用../
import About from '../components/About'

const routes = [
	//路由和组件之间的映射关系，一个映射关系就是一个对象
	{
     
		path:'/home',
		component:'Home'
	},
	{
     
	path:'/about',
	component:'About'
	}
]

接下来因为main.js文件中挂载的是APP组件，所以需要在App.vue文件上添加link才能在html上显示
//App.vue文件
<template>
	<div>
		<router-view></router-view> // 占位作用
		<router-link to='/home'>首页</router-link> // to后面跟上路径
		<router-link to='/about'>关于</router-link>
	</div>
</template>

图示：

3.路由的默认路径

通常情况下，在进入网站首页的时候，我们希望直接渲染首页的内容，而不是通过点击router-link再进行跳转，那么如何让路径默认跳到首页呢

只需多配置一个映射即可
const routes=[
	{
     
	path:'',
	redirect:'/home' // 重定向，即最初路径为根路径时，立即重定向到/home路径
	}
]

4.通过html5的history修改路径模式

默认情况下，我们修改了路径后，在上方地址栏中路径会包含#号，即hash模式

那么如何更换hash模式，变为平时看到的路径呢?

在路由实例中更改mode即可
const router = new VueRouter({
     
	routes,
	mode:'history'  // 将hash模式更改为history模式
})

5.router-link的补充属性

在前面的router-link中，我们只是使用了一个属性：to，用于指定跳转的路径
它还有其他的属性：

• tag: tag可以指定router-link之后被渲染成什么组件，router-link默认会被渲染成a标签。 表示会渲染成一个button元素，而不是a标签
• replace: replace不会留下历史记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中，即默认情况下使用的是pushState
• active-class: 当router-link对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称，但通常情况会直接使用默认的router-link-active而不进行修改

//App.vue
<router-link to='/home' tag='button' replace active-class='active'>首页</router-link>

6.路由跳转代码

有的时候，页面跳转可能需要执行对应的JS代码，这个时候，就可以使用JS代码实现上述router-link跳转

//App.vue
<template>
	<div>
		<button @click='linkToHome'>首页</button> 
		<button @click='linkToAbout'>关于</button>
		<router-view></router-view> // 占位作用
	</div>
</template>

<script>
export default {
     
	name:'App',
	methods:{
     
		linkToHome() {
     
			this.$router.push('/home')
		},
		linkToAbout() {
     
			this.$router.push('/about')
		}
	}
}
</script>