vue-router自学笔记

router安装

1. npm install vue-router
2. 创建router 文件夹及其index.js

router使用

1. 在项目mian入口函数中导入router，在实例中引入
2. new Vue({ el: '#app', router, render: h => h(App) })
3. router中配置导入

import Vue from 'vue'
import Router from 'vue-router'
//组件引入可以懒加载
const Home = ()=> import("@/components/Home.vue")
const About = ()=> import("@/components/About.vue")

4. Vue.use(Router)使用插件必须要用这个参数，所以插件都必须使用
5. 创建router对象实例

const router = new Router({
//路由方式：history和hash两种
mode:'history',
routes: [{
	path:'/',//路径
	redirect:'home'//重定向到指定路径下
}，
{
	path:'/home',
	name:'home',//name使用于keep-alive
	components:Home,//这里是引入的组件const Home = ()=> import("@/components/Home.vue")
	meta:{
	title:'首页'
	},
	//嵌套子路径
	children:{
		path:'',
		name:'',
		component:,
		meta:{
			title:''
		}
	}
}
]
}）
//导出
export default router

6. 单文件.vue中使用

<router-link tag="a" to="/home" active-class="active">首页</router-link>
//其中的tag指定当前router-link为什么类型的标签
//to指定跳转路由地址
//active-class指定当前标签绑定一个class元素
//实现动态路由的话需要绑定vue实例属性如`:to='绑定实例中的参数'`

7. 绑定路由显示路径

//该标签用于指定跳转路由的显示作用代指一个或多个component

• 如果路径携带参数，有两种情况：

• 第一种是params参数

const router = new VueRouter({
  routes: [
    {//在router配置中路径添加:参数名
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

然后标签式传递为

<router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>
//to为v-bind:to这种动态传递参数对象

编程式的方式的话，在组件中添加方法调用

this.$router.push({ name: 'user', params: { userId: 123 }})

这种方式取值

this.$route.params.userId(参数名)//是$route哦

• 第二种方式为查询参数传递
  index.js

{
      path: '/Home',
      name: 'Home',
      component: Home,
      meta:{
        title:'首页'
      },
      query:{
      	key:value
      }
    }

标签式

Go to Foo

编程式

this.$router.push({ name: 'user', query: { id: 123 }})

取值

this.$route.query.id(参数名)

两种方式的路径表现形式为

第一种为params的方式locahost:8080//home/{userId}(这里就是传入参数)
第二种为query的方式locahost:8080//home/？id={id}(这里就是传入参数)
换句话说就是spring中对应注解@PathVariable和@RequestParam两种请求方式

注意事宜
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> 错误

这里说的是如果选择使用params传参的话，这里的路径会将整个params指定为一个整体解决方式有两种
第一种为router.push({ path: /describe/${id}})使用``字符串模板的方式${id}来传入
第二种为router.push({ name: ‘user’, params: { userId }}),这是将push中的path改为name即可指定组件而非路径

导航守卫

1. 全局钩子定义，定义在router.js

//前置钩子
router.beforeEach((to,from,next)=>{
//动态改变当前路径的ttile
//to指代要去的路径即为你点击跳转的路径地址
//from指代点击跳转之前所在的路径地址
  document.title=to.matched[0].meta.title
  next()//如果想要继续必须执行next()方法
})
//后置钩子
router.afterEach((to, from) => {
  // 这里没有next()因为当前路径已经进入，所以不需要再次跳转许可
})

2. 组件钩子定义

//这里官网给出合理便于理解的解释
 beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

3. 第三种为路由钩子

//在router文件中的路由配置项中添加
routes: [
    {
      path: '/foo',
      component: Foo,
      //前置钩子
      beforeEnter: (to, from, next) => {
        //next同理
      }
    },
    {
      path: '/boo',
      component: Boo,
      //后置钩子
      afterEnter: (to, from) => {
        
      }
    }
  ]

keep-alive

组件级缓存

• props有连个{
  第一个：include - 字符串或正则表达，只有匹配的组件会被缓存
  第二个：exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
  }
  如果只想 router-view 里面某个组件被缓存
  第一种

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
    <router-view>
        
    router-view>
keep-alive>

第二种

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        
    router-view>
keep-alive>

<router-view v-if="!$route.meta.keepAlive||$route.meta.keepAlive==‘undefined’">
    
router-view>

这样做的话不需要指定需要被缓存组件名称，只需要判断是否包含keepAlive参数即可

如有错误，有待指出，随时更改