vue03-cli-Router

1.文档结构

App.vue是最大的组件，挂载静态资源index.html中的div#app
1.在这里可以引入页面导航，页脚这些固定组件
2.可以写个组件显示一级路由的视图<router-view
3.所有组件的data都要写成function return的形式

2.跳转路由的方式

1. 插座

<router-link to="/Shangpin">商品</router-link>
<router-link :to="'/Shangpin'">商品</router-link>

2. 插座带参

<router-link :to="{path:'/Shangpin',query:{name:'秋裤'}}">商品</router-link>

3. 插座带参（参数不显示在链接中）

<router-link :to="{name:'myc',params:{id:'lucy0620'}}">购物车</router-link>

//index.js
 {
path:'/Curt/:id',//刷新页面数据不会丢失的写法，显示参数
component: ()=>import('../views/Curt'),
name:'myc'
},

4. JS跳转路由

//把插座换为按钮，点击触发
toShangpin(){
   this.$router.push({path:'/Shangpin',query:{name:'冰棍'}});
}
toCurt(){
   this.$router.push({name:'myc',params:{id:'法米利尔'}});
}
//路由指向的组件 接收
this.$route.query.name
this.$route.params.id

3.懒加载路由

原始写法：

import Shangpin from "../views/Shangpin";
{
    path:'/shangpin',
    component:Shangpin
  },

优化vue项目首屏加速：

{
    path:"/shangpin",
    component: ()=>import('../views/Shangpin'),
  },

4.路由重定向-通配符路由-二级路由

1. 重定向：输入/product，按’/Shangpin’走商品组件，重定向可传值

  {
    path:'/product',
    redirect:{path:'/Shangpin',query:{name:'秋裤2'}}
  },

2. 通配符路由（3.x版本）：处理不存在的路由情况

  {
    path:"/:pathMatch(.*)",
    component: ()=>import('../views/Err'),
  },

3. 二级路由path不以/开头

{
    path:'/News',
    component: ()=>import('../views/News'),
    children:[
      {
        path:'Newsgirl',
         component:()=>import('../components/Newsgirl')
      },
      {
        path: 'Newshot',
        component:()=>import('../components/Newshot')
      },
    ]
  },

5.路由守卫

1. 全局路由守卫,写在main.js中

//全局前置守卫
router.beforeEach(((to, from, next) => {
   next();//括号中填false为回到之前的路由
}))
//全局后置守卫 待路由跳转结束执行
router.afterEach((((to, from) => {
    next();
})))

2. 组件内的路由守卫,直接写在组件中

		beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            next(vm=>{
                console.log('路由被改变了,组件实例的属性：',vm.name)
            });
        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 如带有动态参数的路径/foo/:id，在/foo/1和 /foo/2 之间跳转的时候
            next();
            console.log('组件被复用,组件实例的属性：',this.name)
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            next();
            console.log('离开组件,组件实例的属性：',this.name)
        }

3. 独享路由首位,写在index.js中

{
    path:'/Mine',
    component:()=>import('../views/Mine'),
    //独享路由守卫
    beforeEnter:(to,from,next)=>{
      console.log('独享守卫跳转前：',to,'跳转后：',from);
      next();
    },
    children:[
      {
        path:'Mineinfo',
        component:()=>import('../components/Mineinfo'),
        meta:{requireLogin:true}//走它的子路由也守卫
      },
    ]
  },