export default new Vuex.Store({
    state:{
        // 存放真正的變量，也就是數(shù)據(jù)
    },
    mutations:{
        // 修改state的數(shù)據(jù)操作
    },
    actions:{
        // 可以進行異步同步請求，校驗權限等操作
    }
})

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模塊
Vue.use( VueRouter ) //使用vue-router這個第三方插件

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
]
export default router //導出

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <router-view>
    </router-view>
  </div>
</template>

<div id ="app">
    <p>
    <router-link to="/home">首頁</router-link>
    </p>
</div>

export default {
    Todel() {
        if (usernane) {
            this.$router.push('/del')
        }else{
            this.$router.push('/login')
        }
    }
}

<div id ="app">
    <p>
    <router-link to="/login/?username=abc&password=123">用戶登陸</router-link>
    </p>
</div>

this.$route.query.username
this.$route.query.password

<div id ="app">
    <p>
    <router-link to="/bookList/1">展示書籍</router-link>
    </p>
</div>

this.$route.params.

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        children: [
            {
                name: 'books',
                path: 'books',
                component: Books
            },
]

router.beforeEach((to, from, next) => {
    console.log('前置路由守衛(wèi)', to, from)
    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思沒有權限')
        }
    } else {
        next()
    }
})

router.afterEach((to,from)=>{
	console.log('后置路由守衛(wèi)',to,from)
	document.title = to.name
})