vue-router路由的使用

我们都知道，Vue.js是用来开发单页面应用的，那什么是单页面应用呢，单页面应用英文简写就是SPA，也就是根据不同的url地址，显示不同的内容，但显示在同一个页面中，所以称为单页面应用。

那怎么根据不同的地址来显示不同的内容呢，主要呢就是通过路由配置了，vue中的路由指的是vue-router

进来就来说说vue-router的用法

1：安装

安装有两种方法

1：下载vue-router.js插件，引入到项目中即可使用

2：npm install vue-router

2:如何使用

1：可以使用组件

XXX

这个相当于是html中的超链接，最终在页面中也会被渲染成超链接，to后面跟的是你要跳转的链接地址。

是用来显示链接指定的地址

1:首先肯定是要定义组件，就是你项目中的.vue文件

2：路由配置

在你用脚手架搭建好的项目中，有一个router文件夹，在该文件夹下有个index.js文件。就是在这个文件中对路由进行配置

import Vue from ‘vue’//引入vue
import Router from ‘vue-router’//引入路由插件

Vue.use(Router)//使用路有插件

在给组件配置路由之前应该先引入组件

import login from ‘…/components/login’

比如这样，就是引入login组件

export default new Router({
mode:‘history’,
routes: [
{ path: ‘/login’, component: login }
]

})

这一步是输出并且配置路由，routes是一个数组对象，里面的每一个对象就是一个路由。对象中path后面跟的是路由的地址，component就是配置的组件。

3：将路由挂载到Vue实例上

修改项目下的main.js，在new Vue({})下面追加上router，这样便将index.js文件中配置的路由挂载到vue实例上，供全局使用了。

new Vue({
el: ‘#app’,
router,
render: h => h(App)
})

原文链接：https://blog.youkuaiyun.com/ygy211715/article/details/80664827