🚦This is the repository for Vue Router 4 (for Vue 3)

Last update: Aug 10, 2022

vue-router release candidate CircleCI

This is the repository for Vue Router 4 (for Vue 3)

Supporting Vue Router

Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source project with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider:

Platinum Sponsors

Finogeeks

Gold Sponsors

VueJobs

Silver Sponsors

VueMastery Prefect Bird Eats Bug

Bronze Sponsors

Stanislas Ormières Antony Konstantinidis Storyblok NuxtJS


Get started with the documentation.

Quickstart

Changes from Vue Router 3

Please consult the Migration Guide.

Contributing

See Contributing Guide.

Special Thanks

BrowserStack Logo

Special thanks to BrowserStack for letting the maintainers use their service to debug browser specific issues.

GitHub

https://github.com/vuejs/vue-router-next
Comments
  • 1. Allow pausing listeners at the history level

    What problem does this feature solve?

    Some time, we watn remove history listener manaul.

    For example, in qiankun micro-front. Main-app and sub-app both vue, and beforeRoute guard with main-app. I passed the history and router of the main-app to the sub-app. The sub-app used the history of the main-app, and created the router itself, which caused the route guard in the main-app to fire twice

    Example: https://github.com/beiifeng/vue-router-next-report Followe readme , from 首页 to Home, then to 首页,we find BasicLayout:afterEach /Home once in console. But find BasicLayout:afterEach twice after we switch to PppDemo1 . Sys2Demo1 and Sys2Demo2 is used api I want, only print once.

    It's my commit: https://github.com/beiifeng/vue-router-next/commit/b4cbbd0b80e3713aca45cb8cfa294b037aaa679c

    What does the proposed API look like?

    router = createRouter({
      history,
      routes,
    });
    
    router.removeHistoryListener();
    
    Reviewed by beiifeng at 2022-01-16 13:08
  • 2. Router not working on 4.0.14 -> Use the vue-devtools stable to solve this

    Version

    4.0.14

    Reproduction link

    jsfiddle.net/posva/3yq6ojLv/5

    Steps to reproduce

    Add a normal router-link with a to-value and try to click it.

    What is expected?

    To change page

    What is actually happening?

    Nothing


    I don't know how to use a specific version in jsfiddle so I cant reproduce it there =/

    If I switch from 4.0.13 to 4.0.14 they stop working. The link renders fine but nothing happens when clicking it.

    We're using SSR and "vue": "^3.2.31" and "vite": "^2.8.6"

    Reviewed by ansbar at 2022-03-11 09:44
  • 3. Failed to pass Object data through named routes when migrating from vue-router 3.1.5

    Version

    4.0.0-beta.12

    Reproduction link

    https://codesandbox.io/s/affectionate-sunset-dng3r?fontsize=14&hidenavigation=1&theme=dark

    Steps to reproduce

    this.$router.push({
      name: `Target-Page`,
      params: {
        data: {
          fieldA: 'a',
          ...
          filedZ: false,
        }
    })
    

    What is expected?

    this.$route.params?.data is supposed to be an Object data

    What is actually happening?

    this.$route.params?.data becomes a String data

    data: "[object Object]"


    Our projects are heavily using route.params to pass dynamic data from page to page. We also tried "Passing Props to Route Components", which still cannot meet our demand. We have to use JSON.stringify/JSON.parse/Number()/Boolean() everywhere to pass or retrieve dynamic data if this behaviour is correct for vue-router 4.x.

    Looking forward to see a proper explanation.

    Thanks!

    Reviewed by jackjtr at 2020-09-25 10:52
  • 4. router push gives DOMException: Failed to execute 'replace' on 'Location': 'http://localhost:8080undefined' is not a valid URL

    Using router.push(path) but get an error as in the title. When looking at the debugger, it fails at the changeLocation line:

        function push(to, data) {
            const currentState = assign({}, history.state, {
                forward: to,
                scroll: computeScrollPosition(),
            });
            changeLocation(currentState.current, currentState, true);    // this is the line that fails
    

    I can see in the debugger that to has the correct value but currentState.current is undefined. What could be the issue?

    Reviewed by leopsidom at 2020-07-12 19:37
  • 5. Suspense doesn't display fallback content and warning is output

    Version

    3.0.2

    Reproduction link

    https://jsfiddle.net/seijikohara/jmw3rpue/

    Steps to reproduce

    No fallback content is displayed and warning is output. The version of Vue is 3.0.2.

    [Vue warn]: <Suspense> slots expect a single root node.

    <router-view v-slot="{ Component }">
      <Suspense>
        <template #default>
          <component :is="Component" />
        </template>
        <template #fallback>
          <span>Loading...</span>
        </template>
      </Suspense>
    </router-view>
    

    What is expected?

    Show fallback contents until the component of async setup is initialized.

    What is actually happening?

    No fallback content is displayed and warning is output.

    Reviewed by seijikohara at 2020-10-27 03:26
  • 6. Redirect route name match error

    Version

    [email protected] [email protected] latest source code

    Reproduction link https://github.com/veaba/vue-router-next/tree/dev-veaba/examples/redirect

    Steps to reproduce

    • Use vue-router example redircet demo test vue-router-next

    [email protected] screenshot:

    vue2

    [email protected] latest source code screenshot:

    vue3

    What is expected?

    It should be the same as the redirection example in vue2

    What is actually happening?

    Only part of it can match to the route correctly

    Reviewed by veaba at 2020-03-05 14:15
  • 7. createWebHistory with relative path

    What problem does this feature solve?

    I have a tricky question and a working example is difficult as you also need a reverse proxy… but I hope you get my point when you try understanding following setup (vue3 with vue-router4) Configure vue app with in index.html The router is configured with createWebHistory() The App is served from a subpath like example.com/my-app/ I want to have relative base url as I only want to build one image and use it on different paths.

    What is expected: The base routing path is appended to the current path, so a about page on /about looks like example.com/my-app/about

    What is happening: The route prefix “my-app” is deleted and navigation is internally working but the urls is wrong as it is example.com/about

    When i configure my base with createWebHistory('/my-app/) i loose the possiblity to deploy my container on different context-paths with only one container. I would always have to rebuild the container what I want to avoid.

    What does the proposed API look like?

    createWebHistory works with relative path Alternative would be a inspection of the base-href

    Reviewed by Hellmy at 2021-12-15 08:40
  • 8. this.$route.query empty

    Version

    4.0.0-rc.5

    Reproduction link

    https://jsfiddle.net/m297stx4/

    Steps to reproduce

    const { createRouter, createWebHistory } = VueRouter
    const { createApp } = Vue
    
    const App = {
        template: "<div>HelloWorld</div>",
    
        created() {
            console.log(this.$route.query);
        }
    };
    
    const router = createRouter({
        history: createWebHistory(),
        routes: []
    });
    
    createApp(App)
        .use(router)
        .mount('#app');
    

    What is expected?

    Expect than https://jsfiddle.net/m297stx4?query=true fill the this.$route.query object. { query: "true" }

    What is actually happening?

    this.$route.query is empty. {}

    Reviewed by RealAlphabet at 2020-11-26 18:50
  • 9. Won't work with Suspense

    Reviewed by yaquawa at 2020-11-10 15:12
  • 10. "Failed to resolve component: router-view" - compatibility with Vite

    Trying out Vite (a week old tool for building buildless Vue components) took me to Vue 3 beta and vue-router-next.

    I am currently facing this:

    Failed to resolve component: router-view

    Not sure whether it's due to Vue 3 beta or something Vite specific. Decided to open this issue in order to gather discussions, if others are facing something similar.

    resolve fails

    My code base is at: https://github.com/akauppi/GroundLevel-es6-firebase-web/tree/vite-maybe

    Use the vite-maybe branch.

    Reviewed by akauppi at 2020-04-28 17:42
  • 11. When unmounting my vue app i get an error

    Version

    4.0.10

    Reproduction link

    https://random.link

    Steps to reproduce

    Unmount an vue router app

    What is expected?

    proper unmount

    What is actually happening?

    not unmounting, error is thrown removeHistoryListener is not a function


    vue-router.esm-bundler.js?6c02:3347 Uncaught TypeError: removeHistoryListener is not a function at Object.app.unmount (vue-router.esm-bundler.js?6c02:3347)

    Reviewed by danielgran at 2021-07-31 14:52
  • 12. fix(types): normalized Query can have undefined properties

    When a query param is not present the query value is undefined, but the type is only string | null.

    Here is the extract of code where I had this problem:

    const route = useRoute();
    const sortBy = ref(route.query.sort_by.toString())
    

    I got Cannot read property 'toString' of undefined but the linter didn't give any errors.

    Reviewed by andresespinosapc at 2022-08-10 15:47
  • 13. Duplicate API documentation contents.

    Version

    4.1.3

    Reproduction link

    router.vuejs.org

    Steps to reproduce

    See the minimal link. The main content describing this method has two return sections. Also, the return section repeats the explanatory content exactly the same. A lot of the API documentation is in this state. I recommend checking the typedoc.

    What is expected?

    Non-duplicate document content.

    What is actually happening?

    Duplicate document content.


    I've stopped the translation work because I think many parts of the document will probably change again. Always thank you for your hard work.

    Reviewed by niceplugin at 2022-08-05 18:01
  • 14. Critical Bug: Undefined URLs

    While using the latest version of vue and single-spa, i found that the url builder was adding undefined to the URL. For me this happened when i went several levels below the current page. This code avoids adding "undefined" to the URL when the "to" is undefined, when i want to return to the root of the SPA without doing a page refresh.

    Reviewed by brunomartinspro at 2022-08-04 14:38
  • 15. isExactActive is false after a redirect with a named route

    Version

    4.1.3

    Reproduction link

    codesandbox.io

    Steps to reproduce

    • Click on Home Link, isExactActive and isActive is true
    • Click on 4O4 link
    • You are redirected to Home page
    • You current url is /home

    What is expected?

    isExactActive and isActive are true for page Home because you have been redirected to this page

    What is actually happening?

    isActive is true but isExactActive is false


    I have this issue only when I redirect with a named route, I don't have it when I redirect with a url

    Reviewed by Florent-Bouisset at 2022-08-03 11:19
  • 16. Visualized the text content of the "The Full Navigation Resolution Flow" section.

    Visualized the text content of the last section of the "guide/advanced/navigation-guards.md" document: "The Full Navigation Resolution Flow".

    If there is no problem with the content, it seems easier to understand than the text.

    If you decide to use this image, duplicate it on the vue team's figma. The figma link annotations in the documentation also need to be corrected.

    If there are any problems, please reject this PR (with comments).

    Reviewed by niceplugin at 2022-07-24 15:53
  • 17. Props: `route` throw Error. Console say "This is likely a Vue internals bug...."

    Version

    4.1.2

    Reproduction link

    codesandbox.io

    Steps to reproduce

    1. Configure your router.
    2. Go to router.
    3. throws an error.

    What is expected?

    <router-view/> renders the route component.

    What is actually happening?

    Error! Console is: [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at......


    I was told to report the error message to vue/core. But this can happen because I don't know how to use it. So I reported it to vue/router . If I'm using it wrong, the documentation might need more explanation. Description is too sparse. Thanks.

    Reviewed by niceplugin at 2022-07-20 14:45
Related tags
Elegant, fluent route definitions for Vue Router, inspired by Laravel. v3 is currently in beta. [email protected]

Elegant, fluent route definitions for Vue Router, inspired by Laravel. Routisan 3 is currently in beta. Stable release around the corner! npm i vue-ro

Jul 27, 2022
🚦 The official router for Vue.js.
🚦 The official router for Vue.js.

vue-router This is vue-router 3.0 which works only with Vue 2.0. For the 1.x router see the 1.0 branch. Supporting Vue Router Vue Router is part of th

Aug 14, 2022
Generate sitemap.xml by vue-router configuration

vue-router-sitemap Generate sitemap.xml by vue-router configuration Install npm i --save vue-router-sitemap Example usage // router.js import VueRout

Aug 9, 2022
A Trie-based vue router with the ability of managing history.state.

vue-pilot A Trie-based vue router with the ability of managing history.state. Install npm install vue-pilot Features Small (8kb after gzipped). Abili

Nov 16, 2020
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Aug 3, 2022
Hello-vue-router

hello-vue-router Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Dec 23, 2021
Touring Vue Router Example App

Touring Vue Router Example App This is the Vue 3 application we build step by step in the Touring Vue Router course on Vue Mastery. It's starting code

Dec 30, 2021
Vue Router route config generator

vue-route-generator Vue Router route config generator. You may want to use vue-auto-routing for auto generating routing or vue-cli-plugin-auto-routing

Jul 3, 2021
A tool to generate routes for Vue-Router with Vite.

v-route-generate A tool to generate routes for Vue-Router with Vite. Getting Started Install v-route-generate # Choose a package manager you like. #

Jul 24, 2022
Generate Vue Router routes automatically using a markdown arborescence.

Generate Vue Router routes automatically using a markdown arborescence.

May 19, 2020
Automated generation of vue-router

自动生成router文件 通常情况下一个vue项目,随着时间的增加,router会越来越多,而大部分的代码其实都是重复的,修改很麻烦,还不如通过工具生成。

Oct 13, 2021
Lightweight layout resolver for Vue Router

vue-router-layout Lightweight layout resolver for Vue Router. You may want to use vue-cli-plugin-auto-routing which includes all useful features on ro

Jul 6, 2022
Filesystem based route generation for Webpack + vue-router

@badrap/routdir Filesystem based route generation for Webpack + vue-router. @badrap/routdir is based on Sapper's pages and layouts features, with some

Jan 25, 2021
VRouteHelper - package to add that kind of syntax for vue-router.

VRouteHelper I really like how easy it is to specify routes in Laravel so I made this package to add that kind of syntax for vue-router. Any feedback

Apr 25, 2019
Generate Vue Router routing automatically for multipages

Generate Vue Router routing automatically for multipages

Jul 20, 2022
Vue route change loading. using Router Navigation Guards.

Vue Router Loading Easy to use and highly customizable Vue Router Loading. Getting started Install the package: npm install vue-router-loading Import

Mar 17, 2022
A MOD version based on vue-router

vue-router-mod This is a MOD version based on vue-router 3.1.3. Introduction vue-router-mod provides extra apis to replace/remove route dynamically. I

Dec 14, 2020
Provides a wrapper for router-view that allows you to show error pages without changing the URL.

vue-error-page Provides a wrapper for router-view that allows you to show error pages without changing the URL. Why? Because: Trigger router-view chan

Apr 6, 2022
Smart route search to make intelligent looking apps with Vue.js.
Smart route search to make intelligent looking apps with Vue.js.

Make your users dynamically navigate routes, make smart commands and queries with a single directive. Vue Smart Route allows you to create a query sys

Jul 15, 2022