VueRouter路由

发布时间:2023年12月20日

目录

一、路由的基本使用

二、多级路由

三、路由的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
       }
   ]
});

 <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
 <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

二、多级路由

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

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
               }
           ]
       }
   ]
});

  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

三、路由的query参数

<!---跳转路由并携带query参数,to的字符串写法-->
<!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp;-->
<!---跳转路由并携带query参数,to的对象写法-->
<router-link
  :to="{
         path:'/home/message/detail',
         query:{
         id: m.id,
         title: m.title
        }
 }">
<template>
   <ul>
     <li>消息编号:{{ $route.query.id }}</li>
     <li>消息标题:{{ $route.query.title }}</li>
   </ul>
</template>

四、命令路由

export default new VueRouter({
   routes:[
       {
           name: 'regard',
           path:'/about',
           component: About
       }]
});
<router-link
            :to="{
              // path:'/home/message/detail',
              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
              query:{
                id: m.id,
                title: m.title
              }
 }">

五、路由的params参数

 <router-link
            :to="{
              // path:'/home/message/detail',
              name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
              //注意如果你这里使用params传递参数,不能配置path,只能配置name,一定要注意
              params: {
                id: m.id,
                title: m.title
              }
        }">
          {{ m.title }}
 </router-link>
<template>
   <ul>
     <li>消息编号:{{ $route.params.id }}</li>
     <li>消息标题:{{ $route.params.title }}</li>
   </ul>
</template>

六、路由的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的属性

  <router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>

八、编程式路由导航

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

九、缓存路由组件

<!--include的值代表要缓存的组件,比如下面代表在Home组件中要缓存News组件(组件名)-->
<!--如果要缓存多个路由组件就改写为:include="['News', 'Message']"-->
<keep-alive include="News">
     <router-view>
     </router-view>
</keep-alive>

十、全局路由守卫

//全局前置路由守卫
//初始化和在每一次路由切换之前被调用
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();
  }
}
</script>

十三、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();
});

文章来源:https://blog.csdn.net/RreamigOfGirls/article/details/135109856
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。