VUE学习笔记（九）：vue-router路由

一、路由基本使用

安装命令：npm install vue-router --save

在 src–>components 下创建一个 .vue文件界面，在template标签内写上要展示的内容，然后在 script 标签中导出默认， 在 src–>router–>index.js 文件中将该文件导入并将组件和路由一一匹配

//配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
import home from '../components/home'//导入组件
import about from '../components/about'
//通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//创建VueRouter对象
const router = [
	//将路径与组件一一对应
	{ //设置一个默认路径，即用户一打开就在首页界面
	path:''
	//redirect:重定向
	redirect:'/home'
	},
	{
	path:'/home'
	component:home
	},
	{
	path:'/about'
	component:about
	}
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	router,
	mode:'history'
})
//将router对象传入到vue实例
export default router
//在App.vue组件中使用路由

然后在总的 main.js 文件里

import router from './router'

new Vue({
	el:'#app',
	router,
})

//在App.vue组件中使用路由
<template>
	<div id='app'>
		<router-link to='/home' tag="button">首页</router-link>//tag属性将该标签渲染成按钮，默认是a标签
		<router-link to='/about' tag="button">关于</router-link>
		<router-view></router-view>//用于指定页面渲染的位置，现在是渲染在上述两个标签下面
	</div>
</template>

router-link的其他属性：
replace:无属性值，将该标签改成replace类型，即该页面在浏览器中无法点击返回按钮。默认是pushState。
router-link-active:是一个类选择器，点击哪一个页面，该页面就会加上这一个类，即处于活跃状态。后续可以将其与某些动作绑定。如点击某个页面的跳转按钮，该按钮变成红色。
即在样式里添加如下代码

<style>
	.router-link-active{
		color:red
	}
</style>

还可以在路由的属性中改变其值

const router = new VueRouter({
	//配置路由和组件之间的应用关系
	router,
	mode:'history'
	linkActiveClass:'active'
})

通过代码跳转路由

<template>
	<div id='app'>
		<button @click="homeClick">首页</button>
        <button @click="aboutClick">关于</button>
		<router-view></router-view>//用于指定页面渲染的位置，现在是渲染在上述两个标签下面
	</div>
</template>
<script>
    export default {
        name:'app',
        methods:{
            homeClick(){
                this.$router.push('/home')
                //或者 this.$router.replace('/home')
            },
            aboutClick(){
                this.$router.push('/about')
                或者 this.$router.replace('/about')
            }
        }
    }
</script>

路由懒加载

此操作使项目打包时不会将所有组件都打包在同一个JS文件，而是将各个组件分别打包成不同的文件。

import VueRouter from 'vue-router'
import Vue from 'vue'
//import home from '../components/home'//导入组件
//import about from '../components/about'
const home = () => import ('../components/home')
const about = () => import ('../components/about')

//通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//创建VueRouter对象
const router = [
	//将路径与组件一一对应
	{ //设置一个默认路径，即用户一打开就在首页界面
	path:''
	//redirect:重定向
	redirect:'/home'
	},
	{
	path:'/home'
	component:home
	},
	{
	path:'/about'
	component:about
	}
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	router,
	mode:'history'
})
//将router对象传入到vue实例
export default router

路由嵌套

比如在home首页中嵌套两个路由

{
	path:'/home'
	component:home,
	children:[
		{
		path:"news",//不需要加/
		component:homeNews
		},
		{
		path:"messages",//不需要加/
		component:homeMessages
		},
	]
},

路由参数传递

主要有两种方式：
1、params类型
配置路由格式：/router/:id

{
	path:'/detail/:id',
	components:Detail
}
//在组件里
{
	itemClick(){
		this.$router.push({
			path:`/detail/${id}`
		})
	}
	
}
//在  detail.vue  组件里
data(){
	return{
		id:''
	}
},
created(){
	this.id = this.$route.pramas.id
}

传递的方式：在path 后面跟上对应的值
传递后形成的路径：/router/123,router/abc

2、query类型：
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用 query 的 key 作为传递方式
传递后形成的路径：/router?id=123,/router?id=abc

<template>
	<div id='app'>
		<router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.88}}"></router-link>
		<router-view></router-view>//用于指定页面渲染的位置，现在是渲染在上述两个标签下面
	</div>
</template>

//通过代码跳转
profileClick(){
	this. $router.push({
		path:'/profile',
		query:{
			name:"why",
			age:18,
			height:1.88
		}
	})
}

组件生命周期函数

created(){  //在组件创建时回调
	document.title = '首页'
},
mounted(){  //在template标签挂载到dom上时进行回调
},
updated(){   //界面发生刷新时进行回调
},
destroyed(){  //组件被销毁时回调
}

keep-alive的exclude属性

<keep-alive exclude="profile">//即profile组件不会保持状态，而会被销毁,profile是组件名字即"name"
	<router-view/>
</keep-alive>