nuxt.js 的router作用解说：使用，自定义extendRoutes配置，route和router区别

最新推荐文章于 2025-02-15 11:30:00 发布

怎样过不是过

最新推荐文章于 2025-02-15 11:30:00 发布

阅读量4.2k

点赞数

分类专栏： 3分钟前端文章标签： router vue

本文链接：https://blog.csdn.net/weixin_37510612/article/details/116019668

版权

3分钟前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Nuxt.js框架中如何在不修改文件结构的情况下，通过自定义配置实现路由重定向，例如将`/pages/test/commonTest`重定向至`/hhh`。基础使用包括在模板中使用`<nuxt-link>`标签或通过`this.$route.push()`方法进行页面跳转。同时，文章详细解释了`router`和`route`的区别，`this.$route`用于获取当前路由信息，而`this.$router`则提供了如`push()`、`go()`等导航方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nuxt的router是自动生成的，不需要配置router，然后下面介绍的就是基础的使用，特殊的个性化自定义的配置，然后router和route的常用易混淆的解说

# 一：基础的使用

要在页面使用路由建议使用<nuxt-link to="/hhh">

或者是直接通过js的写法 this.$route.push({ path: '/hhh', query: {}, params: {} })

# 二：个性化定制nuxt的路由配置

eg：这个的访问地址是 localhost:3000/pages/test/commonTest

那么在不改变文件的放置的位置的情况下，如何通过访问localhost:3000/hhh访问到原先写在pages/test/commonTest里的页面呢？

nuxt.config.js

export default { 
    router: {
        extendRoutes(routes, resolve) {
            const router = [
                {
                    name: "hhh",
                    path: "/hhh",
                    component: resolve(__dirname, "./pages/test/commonTest.vue")
                },
            ];
            routes.push(...router); 
        }
    }
}

# 拓展：router和route的区别

this.$route 类似get请求，获得是一个对象，返回{name: '', params: {}, query: {},path: '', hash: ''} 这几个值用得比较多

    if(this.$route.name == 'yishi'){}
    let href = location.host + this.$route.fullPath;
    let path = this.$route.path;
    let id = this.$route.params.classifyId;

this.$router 是一个构造函数

this.$router.push({
        name: 'home'
    })
    this.$router.push({
        path: '/home',
        query: {},
        params: {}
    })
    this.$router.go(-1); 返回上一页
    this.$router.back('/'); 回到首页
    this.$router.push('/'); 跳回首页