vue脚手架：路由的配置和使用

news2024/12/25 23:41:59

一、路由的配置和使用

1、引入router

在创建项目的时候可以默认用Vue脚手架中的自动生成路由文件
或者自己下载（注意vue和vue-router版本的对应关系）

2、创建路由组件并引入：

在views文件夹中创建2个.vue文件作为路由组件：
引入路由组件：

在router文件夹下的index.js中引入2个路由组件

import Home from '../views/Home.vue'
import User from '../views/User.vue'

在这里插入图片描述

3、将路由与组件进行映射

在这里插入图片描述

4、创建router实例，传入router配置

// 创建router实例，传入router配置
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

5、将router实例对外进行暴露

// 将router实例对外进行暴露
export default router

6、将router挂载到根节点上

在这里插入图片描述

7、设置路由出口

将路由匹配到的组件渲染到对应的位置

<router-view></router-view>

二、过程中遇到的问题

（欸2个不起眼又愚蠢的小错误花费了我不少时间！！！）

1、配置路由后没效果

配置完路由并运行项目后，代码没有报任何错误，但是路由对应的效果没有显示出来。后面仔细核对了网上成功的一些例子，发现居然是component单词拼错了，缺少了一个字母，导致代码没有报错但是路由效果也没出来。

2、配置子路由后没效果

后面跟着教程试了一下子路由，发现父级路由效果出来了，但是子路由效果没有出来。后面发现子路由的关键字children首字母要小写，而我弄成大写的了，改过来之后，效果和页面均正常。

在这里插入图片描述

3、其他

router文件夹下的index.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'

Vue.use(VueRouter)

// 将路由与组件进行映射
const routes = [

  // 主路由
  {
    path:'/', 
    component: Main,
    // 子路由
    children:[
      {path:'home', component: Home},
      {path:'user', component: User}

    ]
  }

  
]

// 创建router实例，传入router配置
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 将router实例对外进行暴露
export default router

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


Vue.config.productionTip = false
Vue.use(ElementUI);


// 将实例挂载到根节点上
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')