学习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 @   东方不败--Never  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示