vue路由

vue路由

• 安装 npm i vue-router@3
• Vue.use(VueRouter)
• route/index.js

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1  from './page1.vue';
//引用page2页面
import page2  from './page2.vue';

//定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
]

//实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

• main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

• 使用
• pages 一般放置路由组件 components放普通组件

<route-link  to="/about">
<route-link  to="/home">
<route-view></router-view>

• 嵌套路由

复制代码
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue';
import phone  from './phone.vue';
import computer from './computer.vue'

const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },
    // {path:"/page2",component:page2},
    // // {path:'',redirect:"page1"}
    // {path:"",component:page1},
    // {path:"/user/:name",component:user}
    
]

const router=new VueRouter({
    routes
});

export default router
复制代码

• 路由传参
• 标签导航：标签导航是通过转义为标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

//跳转到名为user路由，并传递参数userId
<router-link :to="{ name: 'user', query: { userId: 123 }}">User</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

• 编程式导航：我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转

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

$route.query.id //可以从这个里面去获取内容

this.$route.path //获取当前路由

• 命名路由
• 就是name字段 可以跳转的时候简化编码
• params参数/user/15 是这样的方式
• path:“/name/:id/:page” 获取是从 this.$query.params 使用to去跳转 name必须要是name 不能时候path配置项
• props传值 在路由中定义props:true 会将路由中收到params以props传入组件 也可以是函数
• 历史记录模式 - push模式 -replace模式
• 编程式路由导航

this.$router.push({ //路由跳转
	name:'goto',
	params:{
		name:'succ'
	}
})

this.$router.replace()
this.$router.back()
this.$router.forward()
this.$router.go()

• 缓存路由组件 路由切换的时候会把内容销毁 回来之后就没了 就可以使用这个功能

<keep-alive include="a,b">  这边填的是组件名
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

• 两个新的生命周期是路由组件独有的
• activated() 激活
• deavtivated() 失活
• this.$nextTick(function(){}) //当我操作了dom后 vue把数据放入页面了再调用这个函数
• 路由守卫
• 全局路由守卫

//在路由的的配置项不是你想加就可以加  可以放入meta是可以随便放数据
//
router.beforeEach((to,form,next)=>{
//to 去 //form 从那里来 

next() //放行


})  //路由前置守卫
//后置路由守卫
router.afterEach((to,from)=>{
})

• 局部路由守卫 在路由中写 beforeEnter:(to,from,next)=>{}
• 组件内路由守卫 就是直接下载组件中
• beforeRouterEnter(to,form,next) 通过路由规则进入该组件时调用
• beforeRouteLeave(to,form,next) 通过路由规则离开该组件时调用
• history模式 和 hash模式