路由模式
Hash: 使用URL的hash值来作为路由。支持所有浏览器 这种为默认模式 URL中带有#的
History: 当你使用 history 模式时，URL 就像正常链接，例如 http://yoursite.com/user/id，也好看！
Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式
linkActiveClass
linkActiveClass 该配置为激活状态时动态添加的class名称
页面结构
<body>
<div id="app">
<h1>路由守卫</h1>
<router-view></router-view>
<br />
<router-link to="/">跳转首页</router-link>
<router-link to="/user">跳转会员中心</router-link>
<router-link to="/product">跳转产品页</router-link>
</div>
</body>
<script src="./vue.min.js"></script>
<script src="./vue-router.js"></script>
逻辑结构
const Home = {
template: `<h1>首页</h1>`
}
const User = {
template: `<h1>会员中心</h1>`
}
const Product = {
template: `<h1>产品中心</h1>`
}
const router = new VueRouter({
mode: 'hash',
linkActiveClass:'active',
routes: [
{
path: '/',
component: Home,
},
{
path: '/user',
component: User,
},
{
path: '/product',
component: Product,
},
]
})
var app = new Vue({
el:'#app',
router,
})