VueRouter的基本使用

router文件夹中index.js文件

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

// import Home from '../components/Home';
// import About from '../components/About';
// import HelloWorld from '../components/HelloWorld';
// import User from '../components/User'

// 路由懒加载导入
const Home = ()=>import('../components/Home');
const About = ()=>import('../components/About');
const User = ()=>import('../components/User');
// const HelloWorld = ()=>import('../components/HelloWorld');
const HomeMessage = ()=>import('../components/HomeMessage');
const HomeProfile = ()=>import('../components/HomeProfile');
const Profile = ()=>import('../components/Profile')

// 1.使用Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes=[
	{
		path:'/',
		// redirect重定向
		redirect:'/home'
	},
	{
		path:'/home',
		component:Home,
		redirect:'/message',
		meta:{
			title:"首页"
		},
		children:[
			{
				path:'/message',
				component:HomeMessage
			},
			{
				path:'/profile',
				component:HomeProfile
			}
		]
	},
	{
		path:'/about',
		component:About,
		meta:{
			title:"关于"
		},
	},
	
	{
		path:'/user/:userId',
		component:User,
		meta:{
			title:"用户"
		},
	},
	{
		path:'/profile',
		component:Profile,
		meta:{
			title:"简介"
		},
	}

];
const router=new VueRouter({
	// 这个自定义的名字,是可以的,但是这里由于是使用了es6 的语法糖的形式,将前面相同给省略了, 但是如果省略的话,就必须要求是一致的 routes:routes (没有引号)
	// routes:routers,
	routes,
	mode:'history',
	linkActiveClass:'active'
	
});
// to:即将跳转进入的路由对象;from:当前导航即将离开的路由对象;next:调用该方法后,才能进入下一个钩子
// 前置守卫/回调(guard)
router.beforeEach((to,from,next)=>{
	// 从from跳转到to
	document.title=to.matched[0].meta.title;
	console.log(to)
	next()
})
// 3.导出Router
export default router

app.vue文件

<template>
  <div id="app">
    <div>
      <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
      <router-link to="/about" replace active-class="active">关于</router-link> -->
	<!-- 	<router-link to="/home" tag="button" replace>首页</router-link>
		<router-link to="/about" replace>关于</router-link> -->
	<!-- 	<button @click="homeBtn">首页</button>
		<button @click="aboutBtn">关于</button> -->
		
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>
		<!-- <router-link :to="'/user/'+userId">用户</router-link> -->
		<!-- <router-link :to="{path:'/profile',query:{name:'Bob',age:19,height:188}}">简介</router-link> -->
		<button @click="userBtn">用户</button>
		<button @click="profileBtn">简介</button>
		
		
    </div>
		
			<keep-alive exclude="About,User">
				<router-view></router-view>
			</keep-alive>
		
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){return {userId:'lisi'}},
methods:{
homeBtn(){
this.$router.push('./home')
console.log("homeBtn")
},
aboutBtn:function(){
this.$router.push('./about')
console.log("aboutBtn")
},
userBtn(){
	this.$router.push('/user/'+this.userId)
},
profileBtn(){
	this.$router.push({
		path:'/profile',
		query:{
			name:'Bob',
			age:19,
			height:188
		}
	})
}
  }
}
</script>

<style>
.active{color: red;}
</style>

Profile.vue文件

<template>
	<div>
		<h2>我是Profile组件</h2>
		<p>我是Profile；哈哈哈哈哈</p>
		<h3>{{$route.query.name}}</h3>
		<h3>{{$route.query.age}}</h3>
		<h3>{{$route.query.height}}</h3>
	</div>
</template>

<script>
	export default{
		name:'Profile',
		created(){
			console.log('ProfileCreated')
		},
		destroyed(){
			console.log('ProfileeDestroyed')
		}
	}
</script>

<style>
</style>