2024年Web前端最全Vue中的路由，深入浅出前端开发

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import Vue from ‘vue’

//引入vueRouter

import VueRouter from ‘vue-router’

import Home from ‘…/views/Home.vue’

import About from ‘…/views/About.vue.vue’

Vue.use(VueRouter)

const routes = [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/about’,

name: ‘About’,

component: About

}

]

//创建router示例对象，去管理一组一组的路由规则

const router = new VueRouter({

routes

})

//暴露router

export default router

几个注意点

1. 路由组件通常放在pages文件夹下，一般组件通常放在componnets文件夹下

2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3. 每个路由组件都有自己的$route属性，里面存储着自己的路由信息

4. 整个应用之只有一个router，可以通过组件的$router属性获取到。

使用

1. 配置路由

import Vue from ‘vue’

import VueRouter from ‘vue-router’

import Home from ‘…/views/Home.vue’

import About from ‘…/views/About.vue’

import New from ‘…/views/News.vue’

Vue.use(VueRouter)

const routes = [{

path: ‘/’,

name: ‘Home’,

component: Home,

},

{

path: ‘/about’,

name: ‘About’,

component: About,

children: [{//通过children配置子级路由

path: ‘news’,//此处不要写成：/news

component:News

}]

}

]

const router = new VueRouter({

routes

})

export default router

2.显示路由

3.跳转的时候需要写完整的路径

news

路由传递参数（两种方式）

• About路由组件页面

news|

• <router-link :to="{

  path:‘/about/news’,

  query:{

  id:m.id,

  name:m.name

  }

  }">{{m.name}}

  • News路由组件页面
• hi:{{this.$route.query.id}}我是{{this.$route.query.name}}