vue-router的安装使用

1.安装

方法一：

在package.json里的package.json的的pendencies里面添加当前需要安装的版本号，最新的版本号可以去gihub上面去搜

  "dependencies": {
    "stylus": "^0.54.5",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

配置完成之后再执行npm install 即可安装

方法二：

直接执行：

npm install vue-router --save

2.使用

   1.在main.js里面引入vue-router,用import引入vue-router（PS：from后面的名字来源于vue-router的package.json的name配置），

  2. 然后将暴露出来的vue-router赋值给VueRouter.

  3. 用Vue.use();方法 明确地安装路由功能：（如果使用全局的 script 标签，则无须如此（手动安装）。）

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

4.在需要使用vue-router的组件里面设置路由的入口和出口：

html:

router.js JS:

/**
 * Created by F1231657 on 2018/1/4.
 */
// 1.引入vue和vue-router并赋值给相应的Vue和Router
import Vue from 'vue';
import Router from 'vue-router';

import goods from '@/components/goods/goods';
import seller from '@/components/seller/seller';
import rating from '@/components/rating/rating';

// 2.通过Vue的use方法注入Router
Vue.use(Router)
// 3.创建 router 实例，然后传 `routes` 配置
const router = new Router({
    // 指定路由选中时的样式类名
    linkActiveClass: 'active',
    hashbang: true, // 将路径格式化为#!开头
    history: true, // 启用HTML5 history模式，可以使用pushState和replaceState来管理记录
    /**
     * 4.@desc 路由配置配置具体的路径
     */
    routes: [
        {
            path: '/goods',
            component: goods
        },
        {
            path: '/seller',
            component: seller
        },
        {
            path: '/rating',
            component: rating
        },
        {
            path: '/*',
            component: goods
        }
    ]
})
/**
 * @desc 全局监听路由变化
 */
// router.beforeEach((to, from, next) => {
//     store.dispatch('updateHistoryLength') // 变化时更新路由切换长度
//     next()
// })
// 5.导出路由
export default router

PS：以上路由基于页面初始。路由的配置信息是单独放在一个文件夹里面的，所以还需要在main.js里面引入并实例化路由

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
// 导入路由
import router from './router'

// 通过Vue的use方法注入VueRouter
Vue.use(VueRouter);
Vue.config.productionTip = false;
// 以下注释表示此处new的vue无需赋值给一个变量，跳过new的新对象赋值机制
/* eslint-disable no-new */
new Vue({
  // 显示的节点处，此处为入口页的id为app的盒子
  el: '#app',
    // （此处相当于router:"router"）实例化一个变量
    router,
  // 显示的模板
  template: '',
  // 显示的组件注册
  components: {App}
});

3.总结：

vue的路由方式和angular很像，相似度极高。完整思路都是

1.在html的模板里面申明了路由的入口和出口，入口也就是说点击何处产生路由的开始，出口就是表示点击某个入口出口显示什么文件，实在理解不了参照我的angular路由的文章

2.在js里面引入vue-router，然后用vue的use()方法引入router 

3.最后实例化router并配置router的路由路径

4.PS,注意如果路由是单独写在一个文件里面的需要将这个文件导出（export）,然后在需要用到路由的地方import

https://router.vuejs.org/zh-cn/essentials/getting-started.html