vue-router 笔记

基本操作

1. 在src 目录下新建router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const routes = [
  {
    path: '/',
    component: () => import('../components/TitleBar')
  },
  {
    path: '*',
    redirect: '/'
  }
]

const router = new Router({
  routes,
  mode: "hash"
})

export default router

这里的mode有两个选项 hash 和history两个选项，其中hash的路径都是带#的，history则会直接使用路径

2. 在main.js中引入这个router

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3. 打开页面查看标题上是否已经显示
   

二级路由的使用

1. 在原有的router/index.js 下添加children属性，形成一个多叉树结构的list，成员和上一级一样

const routes = [
  {
    path: '/',
    component: () => import('../components/TitleBar.vue'),
    name: 'TitleBar',
    children: [
      {
        path: 'tasksquare',
        name: 'tasksquare',
        component: () => import('../components/tasksquare.vue')
      }
    ]
  },
  {
    path: '*',
    redirect: '/'
  }
]

2. 因为这里都是从根路径titlebar下开始渲染其他组件，所以需要让titilebar知道怎么去渲染子级组件

<template>
  <div class="title_bar">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="weblogo"><img class="webtitle_logo" alt="网页logo" src="../assets/title_logo.png"></el-menu-item>
      <el-menu-item index="tasksquare">任务广场</el-menu-item>
      <el-menu-item index="userinfo" id="userblock">用户信息</el-menu-item>
    </el-menu>
    <router-view></router-view> -- 这里标名，如果有子级组件用这个位置开始渲染
  </div>
</template>

3. 查看前台页面