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的基本使用

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

猜你喜欢