VueRouter路由

目录

一、路由的基本使用

二、多级路由

三、路由的query参数

四、命令路由

五、路由的params参数

六、路由的props配置

七、router-link的replace的属性

八、编程式路由导航

九、缓存路由组件

十、全局路由守卫

十二、组件内部路由守卫

十三、history模式和hash模式

十四、使用路由元信息(meta)设置页面标题

---

一、路由的基本使用

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/components/About";
import Home from '@/components/Home';

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home
       }
   ]
});

 About
 Home

二、多级路由

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/pages/About";
import Home from '@/pages/Home';
import News from "@/pages/News";
import Message from "@/pages/Message";

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home,
           children:[
               {
                   path: 'news',
                   component: News
               },
               {
                   path: 'message',
                   component: Message
               }
           ]
       }
   ]
});

  About
  Home

三、路由的query参数

四、命令路由

export default new VueRouter({
   routes:[
       {
           name: 'regard',
           path:'/about',
           component: About
       }]
});

五、路由的params参数

 
          {{ m.title }}
 

六、路由的props配置

  {
                   path: 'message',
                   component: Message,
                   children:[
                       {
                           name: 'particulars',
                           path: 'detail/:id/:title',
                           component: Detail,
                           //props的第一种写法值为对象,该对象的所有key-value都会以props的形式传给detail组件(死数据)
                           // props:{
                           //     a:1,
                           //     b:'hello'
                           // }
                           //props的第二种写法，值为布尔值,布尔值为真，就会把该路由组件收到的所有params(注意如果是query参数不会奏效的)参数以props的形式传递给detail组件
                           // props: true
                           //props的第三种写法,值为函数  $route.query.id
                           props({ query: { id, title } }){
                               return {
                                   id,
                                   title
                               }
                           }
                       }
                   ],
               }
           ]
       }

七、router-link的replace的属性

  News

八、编程式路由导航

 methods:{
    pushShow(m){
      // console.log(this.$router); //router路由器 ==》管理 route路由(一系列key-value的规则)
      this.$router.push({
        //这里与router-link的to属性配置形式是一样的
        name: 'particulars',
        query:{
          id: m.id,
          title: m.title
        }
      })
    },
    replaceShow(m){
       this.$router.replace({
         //这里与router-link的to属性配置形式是一样的
         name: 'particulars',
         query:{
           id: m.id,
           title: m.title
         }
       })
    }
  }

九、缓存路由组件

十、全局路由守卫

//全局前置路由守卫
//初始化和在每一次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // console.log(to, from);
    console.log('前置路由守卫');
    const { isAuth } = to.meta;
    if(isAuth){
        //代表需要鉴权
        if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
        else alert('无权限');
    }else{
        next();
    }
});

//全局后置路由守卫
//初始化和在每一次路由切换之后被调用
router.afterEach(( to, from ) => {
    console.log('后置路由守卫', to, from);
    //点击每一个路由都切换西夏document.title
    const { title } = to.meta;
    document.title = title || 'vue-advance';
})

十一、独享路由守卫

 {
           name:'homepage',
           path:'/home',
           component: Home,
           meta:{
               title: '主页'
           },
           children:[
               {
                   name: 'ns',
                   path: 'news',
                   component: News,
                   //meta:路由元信息，可以配置是否需要校验的信息
                   meta:{
                       isAuth: true,
                       title: '新闻'
                   },
                   //独享路由守卫
                   beforeEnter(to,from,next){
                       const { isAuth } = to.meta;
                       if(isAuth){
                            //代表需要鉴权
                            if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
                            else alert('无权限');
                        }else{
                            next();
                        }
                   }
               }

十二、组件内部路由守卫

export default {
  name: "About",
  mounted() {
    console.log('The route of About', this.$route);
  },
  //组件内路由守卫

  //与前置和后置是两码事
  //通过路由规则进入该组件时被调用,注意一定是通过路由规则进入组件，普通的组件装载是不会调用的
  beforeRouteEnter(to, from, next){
    console.log('App---beforeRouteEnter');
    console.log(from, to);
    const { isAuth } = to.meta;
    if(isAuth){
             //代表需要鉴权
      if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件
      else alert('无权限');
    }else{
      next();
    }
  },
  //通过路由规则离开该组件时被调用
  beforeRouteLeave(to, from, next){
    console.log('App---beforeRouteLeave');
    console.log(from, to);
    next();
  }
}

十三、history模式和hash模式

//创建一个路由器
const router = new VueRouter({
    //默认开启hash模式
    mode: 'history'
});

十四、使用路由元信息(meta)设置页面标题

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页' } // 添加meta字段，定义标题
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于我们' } // 添加meta字段，定义标题
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title + ' - 网站名称';
  } else {
    document.title = '网站名称';
  }
  next();
});