Vue-Router安装步骤

当前的框架环境为 vue-cli

安装

vue add router

核心步骤

一、 使用插件

import Router from 'vue-router'
//引入插件
Vue.use(Router)

二、 创建Router实例（配置路由和组件的mapping关系）

export default new Router({...})

三、 在根组件上添加实例 （作为一个选项）

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

四、 添加路由视图

<router-view></router-view> 相当于一个占位符

<router-link to='/'></router-link>

单页面方案 spa

1、 hash模式 #/about

url的#后的地址变化， 浏览器不会刷新但是能监听到hashchange事件获取

2、 history /about

h5的history api，可以获取历史记录的栈