Vue Router

声明式导航

app.vue

<div id="app">
      <!-- 声明式导航 -->
      <router-link to="/home" tag="li" active-class="myClass">Home</router-link><br>
      <router-link to="/center" tag="li" active-class="myClass">Center</router-link><br>
      <router-link to="/about" tag="li" active-class="myClass">About</router-link>
      <hr>
      <router-view></router-view>
    </div>
    <!--myClass为选中后会产生的类-->

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from '@/views/home'
import Center from '@/views/center'
Vue.use(VueRouter);

const routes = [{
        path: "/home",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        component: () =>
            import ( /* webpackChunkName: "about" */ "../views/About.vue")
    },
    {
        path: '/center',
        component: Center,
    },
    {
        path: '*',          //除了上面存在的路由
        redictive:'/home'  //重定向
    }
];

const router = new VueRouter({
    mode: "history",//默认为'hash',即有/#
    base: process.env.BASE_URL,
    routes 
});

export default router;

添加二级路由

<!--给一级组件center添加子路由，则其内部要有router-view-->
<template>
  <div>
    <h1>This is an Center page</h1>
    <router-view></router-view>
  </div>
</template>

const router=[
{
    path: '/center',
    component: Center,
    children: [{
            path: 'shopping', //前面不能加斜杠
            component: Shopping
        },
        {
            path: '/center/moving', //或者全写
            component: Moving
        },
        {
            path:'',     //到/center会跳转到/center/shopping
            redirect:'/center/shopping'
        },
        {
            path:'*' //只要在/center后，除了上述路由，会重定向到shopping
            redirect:'/center/moving'
        }
]},
]

编程式导航

main.js

new Vue({
  router,   //会挂载到实例上,即this.$router
  render: h => h(App)
}).$mount("#app");

app.vue

<ul>
      <li v-for="data in datalist" :key="data" @click='onChangePage(data)'>{{data}}</li>
</ul>

data(){
    return{
      datalist:[1111,2222,3333]
    }
  },
  methods:{
    onChangePage(id){   //datalist的某一项data传给id
    //编程式导航 -路径跳转
      this.$router.push(`/detail/${id}`) //点击1111,跳转到/detail/1111页面，为Detail组件
    //编程式导航 -名字跳转
    this.$router.push({name:'NeilDetail',params:{myid:id}})
    }
  }

router.js

 {
    path: '/detail/:myid',  //:myid为动态数据 此路由为动态路由
    name:'NeilDetail',
    component: Detail
},

Detail组件

//detail.vue
<template>
  <div>
    <h1>detail</h1>
  </div>
</template>
<script>
export default {
    created(){
        console.log(this.$route.params.myid); // 1111
    }
}
</script>

$router为全局路由，$route为当前路由

路由守卫

全局路由守卫，每次访问路由都会进行盘查，只有调用next()才会放行

router.beforeEach((to, from, next) => {
    if (to.path === '/about') {
        console.log('来自', from.path);
        console.log('盘查');
        if (isLogin) {
            next();
        } else {
            next('/login')
        }
    } else {
        next();
    }
})

局部守卫

//某一组件内
<script>
let isLogin = false
export default {
  beforeRouteEnter (to, from, next) {
    console.log('to',to.path)
    console.log('from',from.path)
    if(isLogin){
      next();
      }{
      next('/login')
    }
    
  }
}
</script>