一文彻底学会Vue路由

vue路由

1.vue-router简单使用

vue-router官网

1.1vue-router的下载

npm i vue-router@3

1.2在main.js

// 改文件是项目的入口文件


// 映入vue
import Vue from 'vue'

// 映入app组件
import App from './App.vue'

//映入vue-rputer
import VueRouter from 'vue-router'

//映入路由器
import router from './router'
 
// 关闭vue生产提示
Vue.config.productionTip = false

//应用vuerouter
Vue.use(VueRouter)

// 创建vue实例
new Vue({
  el:"#app",
  render: h => h(App),
  router:router
}) 

1.3router的配置

//改文件用于专门创建路由

import VueRouter from "vue-router";
// 映入组件
import Home from '../components/Home'
import About from '../components/About'

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

1.4 路由的切换

<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>

1.5路由指定位置的显示

   <!-- 指定组件展示的位置 -->
        <router-view></router-view>

注意：
1.路由组件一般存放在pages组件中，普通组件存放在commopnts组件中。
2.每个zujain都有一个$router属性，存放自己的路由信息。
3.切换的路由组件一般是被销毁了

2.嵌套路由

2.1 多级路由的配置

export default new VueRouter({
     routes:[
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message
                },
                {
                    path:'news',
                    component:News
                }
            ]
        },
        {
            path:'/about',
           component:About
        }
     ]
})

<template>
  <div>
    <router-link to="/home/message">Message</router-link>
    <router-link to="/home/news">News</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style></style>

注意在home页面中需要在跳转的页面上加上/home的路径

2.2 多级路由的query传参

1.query传参

 <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: item.id,
              title: item.title,
            },
          }"
        >
          {{ item.title }}
        </router-link>

2.接受参数

在vm的route中接受父路由传递的参数

  <ul>
      <li>消息id:{{ $route.query.id }}</li>
      <li>消息标题：{{ $route.query.title }}</li>
    </ul>

2.3 多级路由的params传参

1.params传参

<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{
          item.title
        }}</router-link>

2.接受参数

 <ul>
      <li>消息id:{{ $route.params.id }}</li>
      <li>消息标题：{{ $route.params.title }}</li>
    </ul>

2.4 接受路由的props参数

在路由中配置全新的配置项props

 props($route){
                          return {
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }

2.接受参数

  props: ["id", "title"],

2.编程试路由

2.1 按钮的跳转

  this.$router.push({
        name: "detail",
        query: {
          id: item.id,
          title: item.title,
        },
      });
      

  this.$router.replace({
        name: "detail",
        query: {
          id: item.id,
          title: item.title,
        },
      });

2.2页面的前进与后退

this.$router.back();
this.$router.forward();
this.$router.go(2) //2表示前进2步，-1表示后退一步

2.3路由缓存

在路由内容展示的页面的router-view加上keep-live

 <keep-alive include="news">  
      <!-- news为组件名 -->
      <router-view></router-view>
    </keep-alive>

3.路由守卫

3.1 配置前置路由守卫

1.在全局前置路由守卫中，to是即将要跳转的路由，from是来自那个路由，next是是否放行。

routes.beforeEach((to,from,next)=>{
  console.log(to,from)
  if(to.path==='/home/news'||to.path==='/home/message'){
    if(localStorage.getItem('school')==='小明'){
        next()
    }else{
        alert('不是小明')
    }
  }else{
    next()
  }
})

2.在route的mate中添加是否需要鉴权的条件。
在全局前置中通过判断是否需要鉴权来判断是否需要跳转。

3.2 独享路由守卫

 beforeEnter:(to,from,next)=>{
                        console.log(to,from)
                          if(to.path==='/home/news'||to.path==='/home/message'){
                            if(localStorage.getItem('school')==='小明'){
                                next()
                            }else{
                                alert('不是小明')
                            }
                          }else{
                            next()
                          }
                    }

3.3 组件内的路由守卫

beforeRouteEnter(to, from, next) {
    console.log(to, from);
    if (to.meta.isAuth) {
      if (localStorage.getItem("school") === "小明") {
        next();
      } else {
        alert("不是小明");
      }
    } else {
      next();
    }
  },

4.路由的两种请求模式

4.1hash

http://localhost:8080/#/home/news
其中#后的值不会发送网络请求。