Vue4-1 - router 路由

Vue可以设置自己的前端路由，通过安装vue-router

1.  安装

npm install vue-router --save
若提示错误：
　　则可以安装提示版本：
　npm install vue-router@3 --save 等

 

2. 创建router目录以及路由映射文件

　　1. 在Vue项目自动生成的src文件夹中创建router文件夹

　　2. 在router文件夹中创建index.js文件

// 导入路由相关模块
import VueRouter from "vue-router"
import Vue from "vue"

// 1. 通过vue.use()安装插件
Vue.use(VueRouter)

// 2. 创建路由对象
// 2.1 在routes中配置路由和组件之间的应用关系
const routes = []

const router = new VueRouter({
    // 2.2 加载路由映射关系
    routes,
})

// 3. 将router对象传入main.js中的Vue对象
export default router

 

3. 在入口文件main.js中，导入路由映射文件并注册到Vue对象中

import Vue from 'vue'
import App from './App.vue'

// 导入路由对象
import router from "@/router";


Vue.config.productionTip = false

// 创建vue对象
new Vue({
  render: h => h(App),
// 注册router
  router　　　　　　
  // 等同于
  // render:function (h){
  //   return h(App)
  // }
}).$mount('#app')

 

4. 之后，就可以创建路由Vue组件了（最初可以建立在components文件夹中，后续优化）

 

5. 接着回到路由映射文件index.js中配置映射关系

　　　　1. 导入路由vue组件

　　　　2. 在routes列表中添加路由信息

　　　　3. 将routes注册到文件中的router对象中

// 导入路由相关vue文件
import Home from "@/components/Home";
import About from "@/components/About";
import User from "@/components/User";

// 2.1 在routes中配置路由和组件之间的应用关系
const routes = [
    {
        path: '',
        // 重定向
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    // 动态路由，路由后边动态的获得一个参数
    {
        path: '/user/:userId',
        component: User
    }
]

// 路由对象中注册映射关系列表
const router = new VueRouter({
　　routes,
})

 

6. 此时，路由映射关系已经搭建好，可以在初始App.vue中使用，相关信息如下：

<template>
  <div id="app">
    <h2>我也能用</h2>
<!--    router-link是内部注册过的组件，可以在全局使用
        to属性：指向路由条目
        tag属性：指定渲染后的标签类型,默认渲染成a标签
        replace属性： 添加后，不会保留该路由条目的记录，也就是跳转后，不能再通过’返回‘返回到该路由条目
        active-class属性：修改router-link自动设置的样式class名称
          1.当router-link匹配路由成功时，会自动给该组件设置一个router-link-active的样式class，
        但如果不想使用这个样式名，就可以通过active-class来修改该名称
          2. 如果要改的router-link很多，则可以通过在路由文件index.js中注册linkActiveClass: '名称'
-->
    <router-link to="/home" tag="button" replace active-class="leaf">首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
<!--    动态路由：提供路由条目和所需参数-->
    <router-link :to="'/user/'+userId" userid>用户</router-link>
<!--    router-view 内部组件，用于显示router-link所连接路由的内容-->
    <router-view></router-view>
  </div>
</template>

 

相对完整的路由index.js文件：

// 路由相关信息
import VueRouter from "vue-router"
import Vue from "vue"

// 导入路由相关vue文件
import Home from "@/components/Home";
import About from "@/components/About";
import User from "@/components/User";

// 1. 通过vue.use()安装插件
Vue.use(VueRouter)

// 2. 创建路由对象

// 2.1 在routes中配置路由和组件之间的应用关系
const routes = [
    {
        path: '',
        // 重定向
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    // 动态路由，路由后边动态的获得一个参数
    {
        path: '/user/:userId',
        component: User
    }
]

const router = new VueRouter({
    // 2.2 加载路由映射关系
    routes,
    // 将默认的哈希模式改为history模式，浏览器显示链接时，不会加上#
    mode: 'history',
    // 修改router-link中自动设置的样式class名称
    linkActiveClass: 'active'
})

// 3. 将router对象传入main.js中的Vue对象
export default router