vue路由的配置

一级路由的配置

1.0 在入口文件main.js中引入并配置router模块

import Vue from "vue";
import App from "./App.vue";
import router from "./router";//引入router

Vue.config.productionTip = false;

new Vue({
  router,//配置router
  render: (h) => h(App),
}).$mount("#app");

1.1 在views文件夹下创建相应组件

1.2 在router文件夹（或文件）下，配置路径信息

import Vue from "vue";
import VueRouter from "vue-router";
import Center from "../views/Center";//引入刚刚创建的组件
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/center",//当路径为/center时
      component: Center,//加载Center组件
    },
  ],
});
export default router;

1.3 在App.vue里面添加路由容器（类似于插槽）

<template>
  <div>
    <router-view></router-view>
  </div>
</template> 

路由声明式导航

1.0 创建更改组件路由的组件
这种方法可以监听到路径的改变还动态的决定给哪个组件做样式切换

<template>
  <div>
      <ul>
      // to 点击时跳转的路径，此处是不用加#号的，直接加路径
      // tag 指定该元素是什么元素
      // active-class 用来做选中样式的切换（固定属性）
          <router-link to="/left" tag="li" active-class="myactive">left</router-link>
          <router-link to="/center" tag="li" active-class="myactive">center</router-link>
          <router-link to="/right" tag="li" active-class="myactive">right</router-link>
      </ul>
  </div>
</template>
<script>
</script>
<style scoped>
.myactive{
    color: red;
}
</style>

1.1 在App.vue中引入并使用该组件

<template>
  <div>
    <router-view></router-view>
    <tabbar></tabbar>
  </div>
</template> 
<script>
import tabbar from "./components/Tabbar"
export default {
  data() {
    return {
      
    };
  },
  components:{//此处以局部组件方式使用
    tabbar
  }
}
</script>

二级路由以及重定向

重定向

    {
      path:"*",//表示匹配所有路径，也就是找不到相应路径时，默认进入"/left"
      redirect:"/left"
    }

1.0 二级路由文件的创建
创建一个文件夹，以父组件的名字命名方便查询，此处为Left

1.1 在父组件中添加路由容器

<template>
  <div>
      left
      <div>菜单栏</div>
      <router-view></router-view>
  </div>
</template>

1.2 在router文件中导入相应二级路由的组件，并配置

    {
      path: "/left",
      component: Left,
      children:[
        {
          path:"a",//这里也可以写成"/left/a"，但不能写成"/a"
          component:A
        },
        {
          path:"b",
          component:B
        }
      ]
    },

1.3 二级路由的重定向

      children:[
        {
          path:"",//在二级路由中，如果path为空，则默认跳转为a路径
          redirect:"a"
        }

动态路由

1.0 创建数据显示页面（组件）

<template>
  <div>
      data数据页面
  </div>
</template>
<script>
export default {
    mounted() {
      console.log("获取到数据为:",this.$route.params)
    },
}
</script>

1.1 获取后台的数据并渲染出来

<template>
  <div>
      A部分
      <ul>//点击数据进入对应的页面
        <li v-for="data in datalist" :key="data" @click="handle(data)">{{data}}</li>
      </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist:["111","222","333"]//没后台数据，先写个假数据
    }
  },
  methods: {
    handle(id){//获取到id，拿到对应的数据
      this.$router.push(`/data/${id}`)//这是通过路径跳转的方法
      //$router是固定方法，这里其实就是data路由下的对应id的数据
      //this.$router.push({name:"data",params:{id:id}})这是通过名字跳转的方法
    }
  },
}
</script>

1.2 在router文件中导入data组件并配置

    {
      path:"/data/:id",//:动态路由的固定写法
      name:"data",//自定义路由名，可用于1.1中通过名字跳转方法
      component:Data
    },

路由守卫

全局路由守卫

//在router文件中导入相应组件并配置login路由组件
const auth={//用来判断是否已经登录
  isLogin(){
    return true;
  }
}
router.beforeEach((to, from, next) => {
  if(to.path==="/center"){//如果访问的路径为/center
    if(auth.isLogin()){//进行判断，有没有登录
      next();//登录了则“放行”
    }else{
      next("/login")//否则跳转至登录页面
    }
  }else{
    next()//其它页面“放行”
  }  
})

局部路由守卫

//在需要检查的组件中写
  beforeRouteEnter(to, from, next) {
    console.log("局部盘查");
    if (true) {
      next();
    } else {
      next("/login");
    }
  },