/**
* main.js
*/
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import hello from './components/Hello.vue'
import c1 from './components/c1.vue'
Vue.use(VueRouter)
// 定义路由组件
const Foo = hello
const Bar = { template: '<div>bar</div>' }
// pushState模式
const routes = [
{
path: '/foo/:id',
component: Foo
},
{path: '/bar/:name', component: Bar},
// 因为不是# 所以要覆盖所有可能样式 这里做一个都匹配不到的接收
{path: '/cc', component: c1}
]
/* eslint-disable no-new */
// 创建router实例 传入routers参数
const router = new VueRouter({
// 启用 history 模式
mode: 'history',
routes
})
// beforeEach 导航钩子
// to 即将要进入的目标
// from 当前导航正要离开的路由
router.beforeEach((to, from, next) => {
if (document.cookie.indexOf('user=user') === -1) {
document.cookie = 'user=user'
// 跳转到一个新路由地址
next('/cc')
}
// 确认
next()
})
new Vue({
el: '#app',
template: '<App/>',
router,
components: { App }
})
/**
* App.vue
*/
<template>
<div id="app">
<router-link to="/foo/1">User</router-link>
<router-link to="/bar/name">Bar</router-link>
<router-view></router-view>
</div>
</template>
/**
* Hello.vue
*/
<template>
<div class="hello">
<!-- $route.params.id : 获取路径参数 -->
路径参数 {{$route.params.id}}
</div>
</template>