vue3项目搭建连载文章(3)-路由配置(router)

94 阅读2分钟

安装步骤

依赖安装

//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;
  }
}