准备工作

下载vue-router，在main.ts中导入并注册如下所示：

import App from './App.vue'
import router from './router'
//以App作为一个参数，创建一个应用实例对象
const app = createApp(App);

app.use(router)
//挂载到id为app的节点上
app.mount('#app');

在src中创建router目录，并在目录下创建文件index.ts,配置路由。如下图和代码所示：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [

    {
      path: '/',
      name: 'HomeView',
      component: HomeView,
      children:[
         //如果有子页面，可在children中添加子路由，格式如下
        // {
        //   path: '',
        //   component: Home
        // },
      ]
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      //这里是懒加载
      component: () => import('../views/AboutView.vue')
    },
  ],
  // 路由滚动行为定制,这里点击二级路由时页面能回到顶部
  scrollBehavior(){
      return {
          top:0,
      }
  }
})

export default router

跳转

router-link标签

不带参数

<RouterLink active-class="active" :to="{path:'category'}" >成都</RouterLink>

或者

<RouterLink active-class="active" :to="'/category" >成都</RouterLink>

带参数

下面这种写法不需要路由匹配参数

<RouterLink active-class="active" :to="{path:'category',query:{id:1}}" >成都</RouterLink>

下面这种写法需要路由匹配参数

<RouterLink active-class="active" :to="`/category/${item.id}`">成都</RouterLink>

路由匹配：在router目录下的index.ts中

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/category/:id',//或者/category.id
      name: 'index',
      component: Category
    },
  ]
})

代码环境

<script setup>
    import {useRouter} from 'vue-router';
    const router = useRouter();
    const goPage = ()=>{
        // 字符串路径
        router.push('/category')

        // 带有路径的对象
        router.push({ path: '/category' })

        // 命名的路由，并加上参数，让路由建立 url
        router.push({ name: 'category', params: { id: 1 } }) // -> /category?id=1

        // 带查询参数，结果是 /category?id=1
        router.push({ path: '/category', query: { id: 1 } }) // -> /category?id=1

        // 带 hash，结果是 /about#team
        router.push({ path: '/category', hash: '#team' })
       
        //坑：`params` 不能与 `path` 一起使用,如果提供了 `path`，`params` 会被忽略，上述例子中的 `query` 并不属于这种情况
        //注意上下两种写法有细微的差别哈，下面的写法要自己在路由匹配
        //路由配置`path:"/home/:id"`或者`path:"/home.id"`
        
        const id = 1;
        // 手动建立 url，但我们必须自己进行路由匹配
        router.push(`/category/${id}`) // -> /category/1
        // 同样
        router.push({ path: `/category/${id}` }) // -> /category/1
        // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
        router.push({ name: 'category', params: { id } }) // -> /category/1
        // `params` 不能与 `path` 一起使用
        router.push({ path: '/category', params: { id } }) // -> /category
        } 
</script>

其他导航方式：

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

router.replace()的使用方法请参考router.push()

获取参数

路由路径参数----路由匹配参数获取

可以是使用props获取参数，但工作中一般不用，这里就不做过多解释，工作中常用的是下面这种形式例如：/catagory/:id

<script setup>
    import {ref, onMounted} from 'vue';
    import {useRoute} from 'vue-router';
    const route = useRoute()
    const id = ref(null);
    onMounted(() => {
        //有params者不能路由使用path，应使用name
        //params 是 跳转路由是由个人规定的参数对象名，没有一般默认为params
        id.value = route.params.id;
    })
</script>

路由查询参数---无路由匹配参数获取

例如： /category?id=1

<script setup>
    import {ref, onMounted} from 'vue';
    import {useRoute} from 'vue-router';
    const route = useRoute()
    const id = ref(null);
    onMounted(() => {
        //这里query是由个人规矩的参数对象名  
        id.value = route.query.id;
    })
</script>

vue3——路由配置与使用