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;
3.在main.ts文件中引入并use router
import { createApp } from 'vue'
import router from './router';
const app = createApp(App);
app.use(router).mount('#app')
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 },
});
};
5.在对应组件中(ContentDetail),获取传过来的query,并由此请求相应数据
import { useRoute } from 'vue-router';
//获取路由传过来的参数id
const { query }: any = useRoute();
const contentId = ref<string>(query.id);
//请求获取文章详情接口
6.问题的出现
此时天真的我以为,该有的都有了,但是点击列表时,发现url是改变了,但是却没有跳转至ContentDetail组件,问了前辈才知道,我连router-view路由出口都没有写,当然没办法显示了。
router-view路由出口
在要替换的未知加上
<router-view></router-view>
则对应位置会插入跳转至的组件,把它放在任何地方,以适应布局,我在这里需要把它放到app.vue里,其他地方当然也是可以的。
总结
在写一个功能的时候,还是需要知道其原理才比较好,照瓢画葫芦能应付得了一次,但却很难举一反三。