vue 复习简单路由使用

我是比较笨的，一般学习我都得学好多遍，才能学会

所以说，如果我能学会，那么同理，聪明的你们也能学会，唯有不断测试就学会了

好，现在我们来看下，vue 简单路由，很简单！

 

 

首先从 入口开始，可见，main.js 加载了App 组件，而我们的路由容器，就在App.vue 中

 

1， 定义路由容器

2，定义路由器，路由器中去定义路由列表：

 

在src 目录下，定义个router文件夹，在此文件夹下新建index.js 

完整代码如下：

import Vue from 'vue'
//  路由器是一个插件
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// import UserList from '@/view/UserList'
import MyHaHa from '@/components/MyHaHa'
import YaYa from '@/components/YaYa'
// 只要是插件，就需要通Vue.use(插件名)
// 固定写法
Vue.use(Router)

// 返回一个路由器，路由器里有路由列表
export default new Router({
  //  路由列表
  routes: [
    {
      path:'/haha',
      name:'haha',
      component:MyHaHa
    },
    {
      path:'/yaya',
      name:"yaya",
      component:YaYa
    },
    // 自动组件跳转到 哈哈页面
    {
      path: '/',
      redirect:'/haha'
    }

  ]
})

3， 将路由器交给根组件

 

 

就完毕了，当path 不同，时，根组件就会找到路由器中的路由列表

查下路由列表，中，path 对应的组件，然后将该组件塞到 路由容器中显示就行了

 

效果截图：