vue中的路由

vue中的路由

一.vue-router介绍

Vue Router是 Vue.js 官方的路由管理器
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌,说白了，就是配合vue.js一起来实现单页应用开发的，它主要用来实现项目中的路由管理
我们需要做的是:

1. 将组件 (components)映射到路由 (routes)，
2. 然后告诉Vue Router在哪里渲染它们

vue-router目前有 3.x 的版本和 4.x 的版本。其中：
vue-router 3.x只能结合 vue2 进行使用
vue-router 4.x只能结合 vue3 进行使用

二.路由模块的创建

1. 在项目中下载安装vue-router
   1. npm install vue-router
2. 创建路由模块文件：router.js
3. 引入
4. 在模块化工程中明确的安装路由功能
5. 创建路由对象
6. 添加具体的路由配置：路由映射组件
7. 暴露

//这个文件用来封装路由模块
//1.工程化-- 模块化
import Vue from 'vue'
import vueRouter from 'vue-router'

// 引入组件
import about from '../components/路由体验/about.vue'
import mine from '../components/路由体验/mine.vue'

// 2.Vue use vueRouter  use之后就会在Vue上挂载一个成员 $route
Vue.use(vueRouter)

// 3.创建路由对象 
const router = new vueRouter({
    //  4.添加具体路由配置
    routes: [
        { path: '/about/:id', component: about },
        { path: '/mine', component: mine }
    ]
})

//  5.暴露
export default router

三.基本路由功能的实现

1. 在main.js中引入路由模块 import router from './router/index'
2. 注入路由
3. 在根组件中添加router-view
4. 使用router-link添加超链接

//main.js
import Vue from 'vue'
import router from './router/index'
import App from './App.vue'

Vue.config.productionTip = false  //阻止vue启动生产消息

new Vue({
  router,  //通过router 配置参数注入路由 让整个应用都有路由功能
  render: h => h(App),  //渲染指定的组件
}).$mount('#app')     //渲染到的位置

<template>
  <div id="app">
  	<!--  设置超链接 -->
  	
    <router-link to="/about/1">关于美食</router-link> &nbsp;&nbsp;
    <router-link to="/about/2">关于政治</router-link>&nbsp;&nbsp;
    <router-link to="/about/3">关于旅游</router-link>&nbsp;&nbsp;
    <router-link to="/mine">我的</router-link>
    
	<!-- 设置路由 映射 组件 的展示区域  -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style lang="less">
</style>

总结

1.路由模块创建

目录文件位置 router/index.js

1. 模块化
2. 创建路由对象
   1. 引入组件
   2. 配置具体的路由：路由映射组件
3. 暴露

2.引入和注入

目录文件位置 main.js

1. 引入路由模块

2. 在new Vue()中注入

3.设置路由映射组件的展示区域

目录文件位置App.vue

1. 添加 router-view

2. 添加超链接 router-link

主要的英文单词

• VueRouter:创建路由对象的构造函数
• routes:创建路由模块
• router:路由注入
• router-view:设置路由映射组件的展示区域
• router-link:路由超链接
• $route : 当前激活的路由信息对象。这个属性是只读的
• $router:router 实例

常见错误

1.不报错，但是没有结果
关注：routes是否写错  或者是否正确的添加的router-view

route config "component" for path: /index cannot be a string id. Use an actual component instead.
组件component配置没有设置为组件对象，而是赋值了字符串
解决：去掉引号

Cannot read property 'matched' of undefined"
1.可能是路由没有正确的暴露
2.没有正确的注入

Cannot find module './router/inde.js'
一定是要资源的引入路径有问题