vue-router（2.0）之什么是路由以及使用步骤（笔记）

前端路由： 在web开发中，路由是指根据url分配到对应的处理程序
vue-router: 通过管理url实现url和组件的对应和通过url进行组件之间的切换

可以做单页面应用（SPA）：加载单个HTML页面，并在用户与应用程序交互时动态更新该页面

vue-router的使用步骤：
1、npm install vue-router--save    //(安装模块)
2、import VueRouter  from 'vue-router'  //(引入模块)
3、Vue.use(VueRouter); // 作为Vue的插件
4、new VueRouter({
    //配置参数

})  //(创建路由实例对象)
5、new Vue({router}) //注入Vue选项参数
6、<router-view></router-view>//告诉路由渲染的位置
在文件src/main.js文件中输入：// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// import './common/index.sass'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,//这里的属性router跟路由实例的名字刚好重名，可以直接写成这样就可以了
template: '<App/>',
components: { App }
})

在文件src/router/index.js文件中输入：import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let routes = [
{
path: '/',
component: mainContent
},
{
/* 网站管理 */
path: '/web_manager',
name: 'webManager',
component: mainContent,
children: [
/* seo优化 */
{
name: 'optimizeSeo',
path: 'optimize_seo',
component: optimizeSeo
},
/* 常规logo */
{
name: 'commonLogo',
path: 'common_logo',
component: commonLogoPage
},
{
path: '/404',
name: 'notFound',
component: notFoundPage
},
{
path: '*',
component: notFoundPage
}
]
}]
let router = new Router({
mode: 'history',
linkActiveClass: 'active',
routes
})

export default router
以上代码就是vue-router的基本使用