搜索
  • 对Vue-Router中的Path的理解
  • 发布于 2个月前
  • 549 热度
    0 评论

最近在学习Vue,在用vue-router组件做导航栏时一直无法实现转跳的效果，折腾了半天终于搞清楚了，记录一下，希望能对遇到类似问题的同学有所帮助。

1.先看一下Router的设置，我设置了一个booklist的路由 

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: 'home',
      component: HomeView
    },
    {
      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')
    },
    {
      path:'/book/booklist',
      name:'booklist',
      component:()=> import('../views/BookListView.vue')
    }
  ]
})
2.然后在导航页面使用RouterLink to定义了转跳地址，写的是booklist 

    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/booklist">书架</RouterLink>
      </nav>
    </div>
问题：现在页面点击书架菜单，系统并没有转跳到显示图书信息列表的组件，也就是说超链接无效。问题出在哪里？

问题点就在于我们在路由组件中设置的path和RouterLink to=后面的路径不一致

正确的写法是： 

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/book/booklist">书架</RouterLink>//这个路径需要和Router组件中的path一致
      </nav>
    </div>


用户评论
可能感兴趣的话题