阅读 282

Vue3使用vue-router

vue3中使用vue-router的方式有所不同,新增createRoutercreateWebHistory等方法,具体请看下面例子,

定义 Router

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    }, {
      path: '/login',
      component: Login
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')
复制代码

使用vue-router方法

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  setup () {
    const route = useRoute()
    const router = useRouter()
    // js内跳转
    // router.push()
    
    // 使用route中参数
    // route.query
    // route.params
    // route.params
    return {
      route
    }
  }
})
复制代码
文章分类
前端
文章标签