Vue-router的学习

147 阅读1分钟

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

安装

方法1、npm install vue-router
方法2、 在项目中的package.json文件dependencies对象中添加
eg:在这里插入图片描述
然后,在cmd输入npm install 进行安装

(最新版本可在vue-router源码‘github.com/vuejs/vue-r…
在这里插入图片描述

引用

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

在这里插入图片描述

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

在这里插入图片描述
(使用独立编译文件时不需要这样做,路由模块会自动安装)

基本用法

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

2、js (main.js)
a).定义(路由)组件
在这里插入图片描述

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

c).创建router实例,然后传routes配置(也可传别的配置参数,eg:mode)
在这里插入图片描述

d).创建和挂载根实例
要通过router配置参数注入路由,从而让整个引用都有路由功能
在这里插入图片描述

演示

在这里插入图片描述