vue-router(一vue-router基本使用)

vue-router基本使用

步骤一：安装vue-router

npm install vue-router --save

步骤二：使用vue-router

通常在src目录下创建touter文件夹下创建index.js
在模块化工程中使用它(因为是一个插件，所以可以通过Vue.use()来安装路由功能)
第一步：导入路由对象，并且调用Vue.use(VueRouter)

第二步：创建路由实例，并传入路由映射配置

path：表示跳转的路由
component：表示要跳转的组件，需要导入

第三步：在Vue实例中挂载创建的路由实例

补充：

router-link标签：

该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a标签>。
to：指定跳转路径
tag属性：可以指定router-link渲染成什么组件
replace：不会留下history记录，后退键不能返回上一个页面
active-class：当router-link对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认名称

router-view标签：

该标签会根据当前的路径，动态渲染出不同的组件。
网页的其他内容，比如顶部的标题、导航，或者底部的一些版权信息等会和<router-view标签>处于同一个等级。
在路由切换时，切换的事<router-view标签>挂载的组件，其他内容不会发生变化。

redirect重定向

使用redirect可以重定向路由地址

history模式

路由的跳转默认修改的hash(哈希值)，可以改为history模式