太原网站推广优化软件开发外包工作室

1.创建项目及路由

1.1 创建文件时记得勾选上vue-router，没有勾选也没有关系

// vue3安装命令
npm create vue@latest

// 以下选项可根据自己所需，进行选择，不懂就翻译
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
// 这里选Yes，自动配置路由
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...
Done.

// 进入项目目录
> cd <your-project-name>
// 初始化配置
> npm i
// 项目运行命令
> npm run dev

1.2 如果以上选择的都是No的话，可以自己手动安装vue-router

npm install vue-router

2.配置路由 

2.1 安装完成过后，配置路由

如果使用了1.1中的方法，直接进入router文件夹配置路由即可

如果之前没有配置路由，在src下创建router文件夹，例如：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'const routes = [// Home是父级{path: '/',name: 'Home',component: () => import('../views/home.vue'),// about是子级children: [{path: 'about',name: 'about',component: () => import('../views/about.vue'),}]},{path: '/login',name: 'Login',component: () => import('../views/login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

2.2 在main.js里面需要的配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'createApp(App).use(router).mount('#app')

 2.3 在App.vue文件中配置占位符

<template>// 路由视图<router-view></router-view>
</template>

 3.路由跳转

路由跳转页面的方式

3.1 router-link跳转

<template><router-link to="./login">login</router-link>
</template>

3.2.1 useRouter跳转

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {router.push('/login')// 或者这样写也可以// router.push({ path: '/login' })
}
</script>
<template><button @click="goto">跳转</button>
</template>

3.2.2 或者根据name名称跳转

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {router.push({name:'Login'})
}
</script>
<template><button @click="goto">跳转</button>
</template>

4.路由传参

传参方式分别是：query和params

4.1 query传参

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {router.push( {path: '/login',query:{val:'Hello World!'}})
</script>
<template><button @click="goto">跳转</button>
</template>

在另一个vue文件中接收

<template><h1>query参数--{{route.query.val}}</h1>
</template>
<script setup>
import { useRoute } from "vue-router";
const route=useRoute()
console.log(route.query.val);
</script>

4.2 params传参

在路由中配置动态路由

import { createRouter, createWebHistory } from 'vue-router'const routes = [............{path: '/login/:id',name: 'Login',component: () => import('../views/login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

传入params参数 

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {router.push( {path:'/login',params:{id:1}})
</script>
<template><button @click="goto">跳转</button>
</template>

接收params参数

<template><h1>params参数--{{route.params.id}}</h1>
</template>
<script setup>
import { useRoute } from "vue-router";
const route=useRoute()
console.log(route.params.id);
</script>