vue3.0路由route/router的使用

注意vue-router版本，我用的是"vue-router": "^4.0.0-alpha.6"

官网的使用步骤

// 1. Define route components.
// These can be imported from other files
const Home = { template: '
Home
' }
const About = { template: '
About
' }

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

// Now the app has started!

自己来配

• 定义router.js

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
	{
		path: "/home",
		name: "Home",
		component: Home,
	},
	{
		path: "/test",
		name: "Test",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/Test.vue"),
	},
];

const router = createRouter({
	history: createWebHashHistory(),
	routes,
});

export default router;

• main.js入口文件引入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import "./index.css";

const app = createApp(App);
app.use(router);//注意顺序
app.mount("#app");

• 使用

<template>
    <div>
        <router-link to="/home">Homerouter-link>
        <router-link to='/test'>Testrouter-link>
    div>
    <router-view>router-view>
template>

<script>
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
    setup(props, context) {
        onMounted(() => {
            console.log(route);
            console.log(router);
        });

        const route = useRoute();
        const router = useRouter();

        return {};
    },
};
script>

这样就可以像以前那样用路由了

有一个小细节

{
	path: "/:home(\\d+)", //正则匹配
	name: "Home",
	alias: "/home", //别名，可以数组['/home1','/home2']
	component: Home,
},

• 别名alias
  
• 正则
  
• 别名alias数组
  

详细了解可以看文档vue-router