学习vue——路由

一、配置vue2路由

router/index.js

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 import MyHeader from '@/components/MyHeader.vue'
 4 import MyMain from '@/components/MyMain.vue'
 5 
 6 Vue.use(VueRouter)
 7 const router = new VueRouter({
 8   routes:[
 9     {path:'/page01/:name',component:MyHeader},
10     {path:'/page02',component:MyMain}
11   ]
12 })
13 
14 
15 export default router

main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 
 5 Vue.config.productionTip = false
 6 
 7 
 8 
 9 new Vue({
10   render: h => h(App),
11   router
12 }).$mount('#app')

 

二、路由传参数

 

 

 

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

四、重定向、404

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

五、编程式路由

<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>

七、缓存路由

 

posted @ 2024-09-25 11:38  东方不败--Never  阅读(6)  评论(0)  编辑  收藏  举报