路由配置与用法

路由

1.概念

Vue.js 路由允许我们通过不同的 URL 访问不同的内容, 实现单页面应用的多页面切换效果。

Vue.js 路由需要载入 vue-router 库.

2.安装

1.先安装
vue create vue-route-demo

2.选择自定义
Manually select features

3.使用空格的方式选择 router   需要取消选择linter（如下图）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlaN1WEa-1660483924468)(E:\3.插入到md的图片\路由1)]

4.选择2X
5.选择y
6.Sass/SCSS (with dart-sass)
7.In package.json
8.Save this as a preset for future projects? (y/N)--y

3.views文件配置

1、router配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n80C8Qxu-1660483924471)(E:\3.插入到md的图片\路由2)]

2、router里面的index中

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'//配置的路由器在routersz中

Vue.use(VueRouter)


const router = new VueRouter({
   //实例化路由管理对象
  mode: 'history',//分为两种history和hash
  base: process.env.BASE_URL,
  routes:routes// 上面导入就可以写到这里了，因为如果对象key value一样，可以只写一个routes
})
export default router// 抛出的这个必须挂在根实例的身上，所有去main.js导入 

3、抛出的router挂载在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
   
  // 将router路由管理对象挂载到根实例身上，在任何一个组件中都可以通过组件实例获取到路由管理对象this.$router
  // 根实例上的对象是所有属性共享的
  router,
  render: h => h(App)
}).$mount('#app')

4、routers文件中

4.1、组件获取方式

方式一：
import HomeView from '../views/HomeView.vue'
const routes = [
  {
   
    path: '/index'