vue-router-路由

目录

• 前言
• 安装
• 一个简单的demo
  • Main和Content组件
  • 配置路由index.js
  • 挂载路由main.js
  • App.vue
  • 效果图

---

前言

项目地址：https://gitee.com/cnleika/vue-learning/tree/master/notebook/11-router

vue-router主要用于实现路径跳转，
我们在ssm和springboot中有用到过@RequestMapping("/路径")，
vue-router的功能与此类似，用于映射组件的路径。

学习vue的时候最好还是从vue3以后开始学，很多语法都有变化，这部分内容debug了一个上午。

安装

在项目路径下使用

npm install vue-router

一个简单的demo

Main和Content组件

新建两个组件，Main.vue和Content.vue

Main.vue

<script setup>
</script>

<template>
  <h1>main</h1>
</template>

<style scoped>
</style>

Content.vue

<script setup>
</script>

<template>
  <h1>内容页</h1>
</template>

<style scoped>
</style>

script setup语法糖
只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写了，
不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的template中自动获得。

style scope
指明css只在当前模板内生效

配置路由index.js

在src/router目录下新建index.js，用于配置路由

import {createRouter, createWebHashHistory} from "vue-router";

// @这东西代表着到src这个文件夹的路径
// 1. 引入组件
const Content = () => import("@/components/Content.vue")
const Main = () => import("@/components/Main.vue")

// 2. 配置导出路由
const routes = [
    {
        // run to Content.vue
        name: 'content',
        //     路由路径
        path: '/content',
        //     跳转组件
        component: Content
    },
    {
        // run to Main.vue
        name: 'main',
        //     路由路径
        path: '/main',
        //     跳转组件
        component: Main
    }
];
// 3. 生成路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
});
// 4. 导出路由
export default router;

挂载路由main.js

import {createApp} from 'vue'
import App from '@/App.vue'
import '@/assets/main.css'

// 自动扫描里面的router配置，重要！！！
import router from '@/router'

const app = createApp(App)
app.use(router)// vue3挂载路由,一定要放在mount挂载前!
app.mount('#app')

App.vue

<script setup>
</script>

<template>
  <div id="app">
    <h1>Hello</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<style scoped>
/*scoped 作用域，指css只在当前模板生效，推荐添加*/
</style>

效果图