vue-router路由导航url已改变，但未跳转至对应组件_vue3 router.push路由跳转页面不跳转

vue-router路由导航url已改变，但未跳转至对应组件

原因：没有写router-view路由出口，当然不会显示

今天要做一个跳转路由的小功能，本小白没有相关知识，但又要短时间内写出来，没有时间去慢慢看官方文档，只能照瓢画葫芦，跟着别的项目里别人写的路由跳转自己瞎写一通，记录一下写的过程以及错误的原因。

1.安装配置vue-router

由于本项目是用pnpm管理各种包，只需在package.json文件中添加需要的版本号

然后运行pnpm i 命令即可安装vue-router

2.在src文件夹下新建一个router.ts文件，在里面写路由配置

import { createRouter, createWebHashHistory } from 'vue-router'
//引入vueRouter
import * as vueRouter from 'vue-router';
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [
  {
    name: 'ContentDetail',
    path: '/ContentDetail',
    //组件懒加载
    component: () => import('./components/ContentDetail/ContentDetail.vue')
  },
]
// 3. 创建路由实例并传递 `routes` 配置
const router = vueRouter.createRouter({
  history: vueRouter.createWebHashHistory(),
  routes,
})

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.在main.ts文件中引入并use router

import { createApp } from 'vue'
import router from './router';
const app = createApp(App);
app.use(router).mount('#app')
1
2
3
4

4.在需要路由跳转的文件中使用 router.push 方法

编程式导航，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

import { useRouter } from 'vue-router';
const router = useRouter();

/**
 * 查看详情跳转路由，携带query参数
 */
const seeRouterPush = (id: string) => {
  router.push({
    path: '/ContentDetail',
    query: { id },
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13

5.在对应组件中（ContentDetail），获取传过来的query，并由此请求相应数据

import { useRoute } from 'vue-router';

//获取路由传过来的参数id
const { query }: any = useRoute();
const contentId = ref<string>(query.id);
//请求获取文章详情接口
1
2
3
4
5
6

6.问题的出现

此时天真的我以为，该有的都有了，但是点击列表时，发现url是改变了，但是却没有跳转至ContentDetail组件，问了前辈才知道，我连router-view路由出口都没有写，当然没办法显示了。
router-view路由出口
在要替换的未知加上

<router-view></router-view>
1

则对应位置会插入跳转至的组件，把它放在任何地方，以适应布局，我在这里需要把它放到app.vue里，其他地方当然也是可以的。

总结

在写一个功能的时候，还是需要知道其原理才比较好，照瓢画葫芦能应付得了一次，但却很难举一反三。