vuejs之路由应用之一

什么是‘路由’，路由相当于一个映射，一个url地址对应一个组件，当url地址A变为url地址B,那么对应地址A的组件就会改变为对应地址B的组件。应用于spa,即：单页应用，url地址改变，它不会跳转页面，只会用url对应的模块取代上一个url对应的模块，始终都在一个页面操作。取代了传统的多页应用。值得高兴的是，虽然，都在一个页面进行操作，但是浏览器的‘前进’，'后退'都可以正常使用。

路由的使用步骤：1：安装路由  npm i vue-router --save

2：引入模块：

import Router from 'vue-router'

import Vue from 'vue'  import Home from '插件路径'

3：作为Vue的插件：

Vue.use(Router)

4：实例化路由：

let router=new Router({ routes:[{path:'/',component:'Home'}]);

5：default export router

注意：2,3,4步骤都写在router/index.js页面，以后需要添加新的view视图都可以在该页面配置对应的路由

6 ：告诉路由渲染的位置：<router-view></router-view>

7:在main.js中导入路由模块

import Vue from 'vue'

import App from '路径'

import router from './router'

new Vue({

el:'#app',

router,

template:'<App/>',

components:{App}

)}