您现在的位置是:首页 >技术交流 >vue脚手架:路由的配置和使用网站首页技术交流

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

十八只兔 2024-06-17 10:26:16
简介vue脚手架:路由的配置和使用

一、路由的配置和使用

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')



风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。