安装步骤
依赖安装
//cd切换到项目所在的目录
npm install vue-router@4
或
npm install vue-router@next
package.json
{
"name": "cron-vue3-plus",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.2.32",
"vue": "^3.2.45",
"vue-router": "^4.1.6" //这个是依赖包安装后效果
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"
}
}
src/router.ts
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import CitySelect from '../components/CitySelect.vue'
import NotFound from '../components/NotFound.vue'
const routes = [
{
path: '/',
name:'HelloWorld',
component: HelloWorld
},
{
//找不到匹配路由的 Path Match,另外这里使用的是 webHistory mode,URL 没有 # 了。
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
},
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
NotFound.vue组件
<template>
<div>Not Found 404</div>
</template>
<script lang="ts">
export default {
name: 'NotFound',
}
</script>
main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
import router from './router'
createApp(App).use(router).use(ElementPlus,{ locale }).mount('#app')
App.vue配置
<template>
<div>
<router-view />
</div>
</template>
Router跳转方式
- 在js中跳转页面
1.导入useRouter函数
import { useRouter } from "vue-router";
2.在进入setup函数时执行
const router = useRouter()
3.在setup函数中进行路由跳转
router.push('/lowcode/project/codeManagement')
- 在template中实现跳转
<router-link to="/user/123">user</router-link>
Router参数传递
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})
在接收页面定义变量route,获取传过来的变量
//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;
项目打包部署到nginx出现404
当使用nginx 部署vue项目的时候 当我们刷新页面的时候,或者访问路由配置页面的时候会直接404,这是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个bug也很简单。只需要将访问重定向到index.html这个页面。交由 index.html 去处理对应的路由跳转就好.
server {
listen 80; # 监听的端口
server_name xx.xx.xxx.xx; # 处理的host地址 (请替换成你对应的项目访问 ip 或 域名)!!!
root /usr/share/nginx/html; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
}