vue3创建项目（二）router路由配置和使用

 router安装与使用

• 先创建一个router的目录

• 在创建一个index.js的文件

• 将路径跳转的内容写在里面

• 这里的组件是你自己写的，之后根据路径就可以跳转了

#index.js配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

npm install vue-router --save

npm install vue-router@next --save 

安装完成后，在package.json中查看vue-router是否安装成功

使用

import { createRouter, createWebHashHistory } from "vue-router";
 
//写你需要的路由
const routes = [
    {
        //路径选择
        path: "/",
        //路径名称
        name: "index",
        //组件导入
        component: () => import("../view/Index.vue"),
    },
    {
        path: "/login",
        name: "Login",
        meta: {
            title: '登录'
        },
        component: () => import( /* webpackChunkName: "login" */ "../view/Login.vue")
    }
];
 
//我也不懂，不动就好了，我c的
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
 
export default router;

elementUI组件安装

为了找一个好看的ui，我们得导入ui的组件

vue3的安装命令如下，2的话是element，3加了个plus

npm install element-plus --save

main.js配置

之后在src的main.js里面进行UI组件的全局导入 -- 复制粘贴即可

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

改变端口的方法

在package.json改变

  "dev": "vite --port 3000",

路由跳转

        导入组件

import { useRouter } from "vue-router";

• 创建对象

  const router = useRouter();

• 输入路径

  router.push("/index");

 

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1296v0yjyzxf3