vue-router路由属性整理

什么是路由：根据url分配到对应的处理程序

redirect路由重定向

代码：

 const routes = [
	{
		path:'/',
		redirect:'/home'//路由重定向
	},
	{
		path:'/home',
		component:Home
	}
	]

在router实例里加上mode："history"去掉URL路径#号(hash模式)改成history模式，必须要和服务器配合起来，不然会崩

代码:

	const router = new VueRouter({
	routes,
	mode:"history"//修改默认hash模式为history模式
	})

路由缓存：路由切换时数据内容不会被销毁,如在第一个页面文本框输入了内容，切换内容销毁
keep-alive的两个属性：include：只有匹配的组件会被缓存
exclude:匹配的组件不会被缓存
keep-alive是vue实例内置的组件

<keep-alive exclude="Home,About">//通过组件的name属性来匹配
<router-view></router-view>
</keep-alive>

router-link默认会渲染成a标签，更改默认标签属性tag; router-link切换路由会有缓存(默认是H5的history.pushState()栈方法)，清楚缓存，不能回退页面replace（是H5的history.replaceState()替换方法）

<router-link to:"/home" tag="button" replate>首页</router-link>//router-link会被渲染成button标签，并且切换路由不能回退

router-link被点击会有默认的样式，设置样式router-link-active,如果不想使用这个样式名，可以在router-link设置属性

.router-link-active{
color:#f00;//选中后文字为红色
}

<router-link to:"/home" active-class="active">首页</router-link>//修改路由选中后的样式名
//如果router-link较多，可以在router实例中添加属性修改
 const router=new VueRouter({
	routes,
	linkActiveClass:"active"//修改所有的路由选中后的样式名
	})

通过事件实现路由跳转

//以vue组件文件为例
<template>
<button @click="homeclick">首页</button>
<button @click="aboutclick">详情</button>
</template>

export default{
name:"App",
methods:{
	homeclick(){
		this.$router.push("/home");//默认,是H5的history.pushState()栈方法
		//this.$router.replace("/home");//是H5的history.replaceState()替换方法
	},
	aboutclick(){
		this.$router.push("/about");//默认,是H5的history.pushState()栈方法
		//this.$router.replace("/about");//是H5的history.replaceState()替换方法
	}
	}
}

获取动态路由传参的值

代码:params的类型

<router-link :to="'/about/'+name">详情</router-link>//在router-link动态传递参数
{{$route.params.aboutId}}//获取使用参数

data(){//在data中定义参数
return {
	name:"zhangsan"
	}
}

const routes=[//在路由配置中配置动态路由
	{
	path:"/about/:aboutId",
	component:About
	}
]

//代码：query的类型   前提是history模式 

<router-link :to="{path:'/about',query:{name:'zs',age:18,height:180}}">详情</router-link>//在router-link动态传递参数
//在url中是localhost:8080/about?name=za&age=18&height=180
{{$route.query.name}}//zs 获取使用参数
{{$route.query.age}}//18
const routes=[//在路由配置中配置动态路由
	{
	path:"/about",
	component:About
	}
]

路由懒加载，与之前路由加载对比

首先，路由中通常会定义很多不同的页面，这个页面最后被打包在一个js文件中，但是，页面这么多放在一个js文件中，必然会造成这个页面非常大，如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况，避免这种情况，需要使用路由懒加载

//在路由配置文件中
//原路由加载
import Home from "../components/Home"
import About from "../components/About"
import User from "../components/User"

const routes=[
	{
		path:'/',
		redirect:'/home'//路由重定向
	},
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	},
	{
		path:'/user',
		component:User
	}
]

//路由懒加载
const Home =()=>import('../components/Home')
const About =()=>import('../components/About')
const User =()=>import('../components/User')

const routes=[
	{
		path:'/',
		redirect:'/home'//路由重定向
	},
	/*{
		path:'/home',
		component:Home =()=>import('../components/Home')//或者可以在routes定义
	},*/
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	},
	{
		path:'/user',
		component:User
	}
]

路由守卫

全局前置守卫（跳转之前钩子）

const routes=[
		{
		path:'/home',
		component:Home,
		meta:{//meta元数据
		//直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。
		title:"首页"}
		}
	}];
router.beforeEach((to,from,next)=>{//to代表将要进入的目标对象,from当前导航正要离开的路由,next一定要调用该方法来resolve这个钩子
	document.title=to.matched[0].mata.title//进入下个路由，网页的title为定义在路由中meta定义的title
	next()
})

全局后置守卫（跳转之后钩子，不需要主动调用next()函数）

router.afterEach((to,from)=>{//to代表将要进入的目标对象,from当前导航正要离开的路由
	console.log("afterEach")
	})

路由独享守卫

routes: [
    {
      path: "/login",
      name: "Login1",//命名路由 使用时：router-link :to="{name:'Login1'}"
      component: Login,
      beforeEnter:(to,from,next)=>{//路由独享守卫  进入路由时触发
         console.log("beforeEnter");
         next()
       }
    }]

组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
//beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创造。
//不过，可以通过传一个替换给next来访问组件实例。在导航被确认的时候执行替换，并且把组件实例作为替代方法的参数。
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}