官方文档:https://router.vuejs.org/zh/

安装

方法1、npm install vue-router
方法2、 在项目中的package.json文件dependencies对象中添加
eg:Vue-router的学习
然后,在cmd输入npm install 进行安装

(最新版本可在vue-router源码‘https://github.com/vuejs/vue-router’–package.json中查看)
Vue-router的学习

引用

1、在项目文件main.js中import vue-router(把vue-router赋值给VueRouter这个变量)

Vue-router的学习

2、通过Vue.use()方法安装vue-router插件

Vue-router的学习
(使用独立编译文件时不需要这样做,路由模块会自动安装)

基本用法

1、html(App.vue)
使用 router-link 组件来导航
通过传入to属性指定链接
<router-link>默认会被渲染成一个<a>标签
Vue-router的学习
通过路由外链<router-view></router-view>展示链接的内容

2、js (main.js)
a).定义(路由)组件
Vue-router的学习

b).定义路由
每个路由应该映射一个组件,其中"component"可以是通过Vue.extend()创建的组件构造器,或者说是一个组件配置对象。
Vue-router的学习
重定向也是通过routes配置来完成,
下面例子是从根下重定向到‘/articles’
Vue-router的学习

c).创建router实例,然后传routes配置(也可传别的配置参数,eg:mode)
Vue-router的学习

d).创建和挂载根实例
要通过router配置参数注入路由,从而让整个引用都有路由功能
Vue-router的学习

演示

Vue-router的学习

相关文章:

  • 2022-12-23
  • 2021-05-30
  • 2021-10-26
  • 2022-03-03
  • 2021-11-12
  • 2021-10-03
  • 2021-04-19
  • 2022-01-19
猜你喜欢
  • 2021-07-08
  • 2021-05-11
  • 2022-02-26
  • 2021-06-11
  • 2022-12-23
  • 2021-06-26
  • 2022-12-23
相关资源
相似解决方案