Vue中如何导入路由简单使用

其实vue.router的使用，就是将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
vue-router网址：https://router.vuejs.org/zh/guide/#html

1 在终端安装下载
cnpm install vue-router --save

2 在main.js中引入
import import VueRouter from 'vue-router'

3 这一步非常重要 相当于注册路由 让它可以$router 全局使用
Vue.use(VueRouter)

4.组件导航渲染
使用router-link组件来导航 通过to属性指定链接。默认会渲染成一个a标签。想渲染到哪里级把router-view写到哪里

<router-link to="/index">首页</router-link>

 <router-view></router-view>

4.写的组件都要引入到main.js中 这样在路由中的组件才能访问到写的组件

4 定义路由规则（相当于创建一个数组）

5.实例化路由对象

6.最后挂载到实例上

7.渲染到页面的两种方式根据需求选择
1.声明式导航，把需要点击跳转的a标签转换成routerlink组件来导航，通过to来指定链接。这种方式也会默认渲染成一个a标签。渲染通过routerview组件。常用于页面导航栏中的跳转，d代码展示。

1.  <a href="">首页</a> 假设是要跳转到首页。转换成 <router-link to="/index">首页</router-link>
    注：/index 代表会通过index.vue组件中的模板去渲染
2.  然后在需要渲染的地方写上<router-view><router-view>相当于把它当做一个出口

2.编程式导航
是借助router实例方法，通过编程代码来实现,在Vue实例内部，我们可以通过$router来访问路由实例。
方法如下：

1.router.push(location,onComplete?,onAbort?) 后面两个参数可写可不写
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

2.router.replace(...)
替换掉之前history的URL

3.router.go(n)
n代表数字 正前进 负后退 router.go(-1) 相当于router.back( )