学习vue——路由

一、配置vue2路由

 

vue2 router 版本3.6.5

 

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyHeader from '@/components/MyHeader.vue'
import MyMain from '@/components/MyMain.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  routes:[
    {path:'/page01/:name',component:MyHeader},
    {path:'/page02',component:MyMain}
  ]
})


export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false



new Vue({
  render: h => h(App),
  router
}).$mount('#app')

 

二、路由传参数

 

 

 

三、路由模式，带井号 和 不带井号

四、重定向、404

const router = new VueRouter({
mode:'history',
routes:[
{path:'/',redirect:'/page02'}, // 重定向
{path:'/page01/:name?',component:MyHeader},
{path:'/page02',component:MyMain},
// {path:'*',component:NotFund},// 配置404要放在最后面
]
})

五、编程式路由

<button @click="tiao">点击跳转</button>
methods:{
    tiao(){
      // this.$router.push("/page02")
      this.$router.push({
        name:'pageName'
　　　　　// 方法一:/page02?key=001

　　　　　　query:{

　　　　　　　　key:'001'

　　　　　　}

　　　　　　// 方法二:/page02/002,需要router/index.js里设置

　　　　　　parmars:{

　　　　　　　　name:'002'

　　　　　　}

      })
    }
  }

router/index.js
{name:'pageName',path:'/page02/:name?',component:MyMain},

 

六、返回 

<span @click="$router.back()">返回</span>

<span @click="$router.go(-1)">返回</span>

七、缓存路由

1、用法：冒号+include，后面跟的是组件name,

export default {

name:'xx'

}

2、一旦使用缓存，crated、motend、destor等钩子函数不能使用

3、被缓存组件，多了2个钩子，active、deactive

 

 

 

八、未登录，登录后返回原地址

// 如果希望，跳转到登录 => 登录后能回跳回来，需要在跳转去携带参数 (当前的路径地址)

// this.$route.fullPath (会包含查询参数)

this.$router.replace({

path: '/login',

query: {

backUrl: this.$route.fullPath

}

})

 

// 进行判断，看地址栏有无回跳地址

// 1. 如果有 => 说明是其他页面，拦截到登录来的，需要回跳

// 2. 如果没有 => 正常去首页

const url = this.$route.query.backUrl || '/'

this.$router.replace(url)