【vue-router】 vue-router的安装与使用

原文链接：https://blog.csdn.net/qq_34645412/article/details/78969279

1.安装

方法一：

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

 

1. "dependencies": {

2. "stylus": "^0.54.5",

3. "vue": "^2.5.2",

4. "vue-router": "^3.0.1"

5. },

配置完成之后再执行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 标签，则无须如此（手动安装）。）

 

1. import Vue from 'vue';

2. import App from './App';

3. import VueRouter from 'vue-router';

4. Vue.use(VueRouter);

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

 

html:

 

1. <template>

2. <div id="app">

3. <v-header></v-header>

4. <div class="tab">

5. <div class="tab-item">

6. <!-- 1.使用 router-link 组件来导航. -->

7. <!-- 2.通过传入 `to` 属性指定链接. -->

8. <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

9. <router-link to="/foods">商品</router-link>

10. </div>

11. <div class="tab-item">

12. <router-link to="/ratings">评论</router-link>

13. </div>

14. <div class="tab-item">

15. <router-link to="/seller">商家</router-link>

16. </div>

17. </div>

18. <!-- 3.设置路由出口 -->

19. <!-- 路由匹配到的组件将渲染在这里 -->

20. <router-view></router-view>

21. </div>

22. </template>

router.js JS:

 

1. /**

2. * Created by F1231657 on 2018/1/4.

3. */

4. // 1.引入vue和vue-router并赋值给相应的Vue和Router

5. import Vue from 'vue';

6. import Router from 'vue-router';

7.  

8. import goods from '@/components/goods/goods';

9. import seller from '@/components/seller/seller';

10. import rating from '@/components/rating/rating';

11.  

12. // 2.通过Vue的use方法注入Router

13. Vue.use(Router)

14. // 3.创建 router 实例，然后传 `routes` 配置

15. const router = new Router({

16. // 指定路由选中时的样式类名

17. linkActiveClass: 'active',

18. hashbang: true, // 将路径格式化为#!开头

19. history: true, // 启用HTML5 history模式，可以使用pushState和replaceState来管理记录

20. /**

21. * 4.@desc 路由配置配置具体的路径

22. */

23. routes: [

24. {

25. path: '/goods',

26. component: goods

27. },

28. {

29. path: '/seller',

30. component: seller

31. },

32. {

33. path: '/rating',

34. component: rating

35. },

36. {

37. path: '/*',

38. component: goods

39. }

40. ]

41. })

42. /**

43. * @desc 全局监听路由变化

44. */

45. // router.beforeEach((to, from, next) => {

46. // store.dispatch('updateHistoryLength') // 变化时更新路由切换长度

47. // next()

48. // })

49. // 5.导出路由

50. export default router

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

 

main.js

 

1. // The Vue build version to load with the `import` command

2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

3. import Vue from 'vue';

4. import App from './App';

5. import VueRouter from 'vue-router';

6. // 导入路由

7. import router from './router'

8.  

9. // 通过Vue的use方法注入VueRouter

10. Vue.use(VueRouter);

11. Vue.config.productionTip = false;

12. // 以下注释表示此处new的vue无需赋值给一个变量，跳过new的新对象赋值机制

13. /* eslint-disable no-new */

14. new Vue({

15. // 显示的节点处，此处为入口页的id为app的盒子

16. el: '#app',

17. // （此处相当于router:"router"）实例化一个变量

18. router,

19. // 显示的模板

20. template: '<App/>',

21. // 显示的组件注册

22. components: {App}

23. });

24.  

 

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