vue学习笔记（七）：路由

Vue是单页面的网页程序，只有一个页面，页面中的不同的部分会被替换成不同的组件的内容
根据不同的浏览器路径替换不同的组件内容
要建立路径和视图之间的关系，即是路由！

静态路由导入：缺点是vue会将所有页面组件的代码都加入到页面中造成臃肿。

动态路由导入：只有使用到的组件代码才会被动态加载到页面中

import Vue from 'vue'
import VueRouter from 'vue-router'
//@是绝对路径的写法，代表的是src目录
import Container from '@/views/views/ContainerView'
import Login from '@/views/views/Login'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    //刚打开"/"就重定向到c/p1页面
    redirect:"c/p1",

    component:Container, //主页组件，使用静态路由，需要头部引入

    //为container中显示的组件配置路由
    children:[
      {
        path:"c/p1", //注意这里路径前面不需要加/，因为需要跟前面的Container的path加一起使用
        component:() => import('@/views/container/PageView1')
      },
      {
        path:"c/p2",
        component:() => import('@/views/container/PageView2')
      },
      {
        path:"c/p3",
        component:() => import('@/views/container/PageView3')
      },

    ]
  },
  {
    path:"/login",
    component:Login //登入页组件，使用静态路由，需要头部引入
  },
  {
    path:"/404",
    component:() => import('@/views/views/NotFound') //404页组件，动态路由
  },
  {
    path:"*",
    redirect:"/404",//找不到的页面就重定向到404页面
  }
]

const router = new VueRouter({
  routes
})

export default router

页面代码：<template>  <div>

    <el-header style="background-color: #42b983;margin: 10px">
      <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="linkClick('p1')"></el-button>
      <el-button type="success" icon="el-icon-check" circle size="mini" @click="linkClick('p2')"></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle size="mini" @click="linkClick('p3')"></el-button>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color:darkred">

<!--这里需要to='p1'配合路由中配置重定向redirect:"c/p1"一起使用才能跳转，不然点开一个页面有其他页面的连接就变成"c/c/p1"，不知道为什么-->

        <router-link to="p1" style="color: white">第1页</router-link><br>
        <router-link to="p2" style="color: white">第2页</router-link><br>
        <router-link to="p3" style="color: white">第3页</router-link><br>
      </el-aside>
      <el-main style="background-color:greenyellow">
        <router-view>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  methods:{
    linkClick(url){
　　　　//使用代码的方式跳转
      this.$router.push(url);
    }
  }
}
</script>