Vue3使用路由

一、配置

1、安装 ： npm i vue-router

2、创建router/index.js

index.js中

import AppNR from "@/components/AppNR";
import AppVc from "@/components/AppVc";
import AppSw from "@/components/AppSw";
import AppLs from "@/components/AppLs";
import {createRouter,createWebHashHistory} from "vue-router";


const routes=[
    {
        path:'/NR',
        component:AppNR
    },
    {
        path:'/VC',
        component:AppVc
    },
    {
        path: '/Sw',
        component: AppSw
    },
    {
        path: '/Ls',
        component: AppLs
    }

]

let route =createRouter({
    history:createWebHashHistory(),
    routes
})
export default route;

在main.js中引入

import route from './router/index'


createApp(App).use(Vant).use(route) .mount('#app')

使用路由：

视图占位

<!--路由-->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

自定义跳转

组件中引入路由，使用push方法

import {onMounted} from "vue";
import route from './router/index'
export default {
  name: 'App',
  setup(){
   // let router=useRoute();

    onMounted(()=>{
      route.push('/Vc') ;//路由跳转
    })
    return {

    }

  },

  components: {
    AppVc
  },

}