vuejs/vue-router

🚦 The official router for Vue 2

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.
• For Vue Router 4 (for Vue 3) see vuejs/router.

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:

• Become a Sponsor on GitHub
• One-time donation via PayPal

Gold Sponsors

Silver Sponsors

Bronze Sponsors

---

Get started with the documentation, or play with the examples (see how to run them below).

Development Setup

# install deps
yarn

# build dist files
yarn build

# serve examples at localhost:8080
yarn dev

# lint & run all tests
yarn test

# serve docs at localhost:8080
yarn docs

Releasing

• yarn run release
  • Ensure tests are passing yarn run test
  • Build dist files VERSION=<the_version> yarn run build
  • Build changelog yarn run changelog
  • Commit dist files git add dist CHANGELOG.md && git commit -m "[build $VERSION]"
  • Publish a new version `npm version $VERSION --message "[release] $VERSION"
  • Push tags git push origin refs/tags/v$VERSION && git push
  • Publish to npm npm publish

Questions

For questions and support please use the Discord chat server or the official forum. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Changelog

Details changes for each release are documented in the CHANGELOG.md file.

Stay In Touch

• For latest releases and announcements, follow on Twitter: @vuejs

License

MIT

Copyright (c) 2013-present Evan You

Special Thanks

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

vue-router's Issues

Vue.use(VueRouter) raises Uncaught TypeError

Trying to use vue-router with latest vue 0.12beta5 . Almost very first command Vue.use(VueRouter) raises Uncaught TypeError: Cannot read property 'push' of undefined ... Is it compatible with latest vue012@beta5 ?

Data resolved from route doesn't trigger updates in component when route changes

When resolving data from the route to a component, whatever value the component gets the first time doesn't get updated when the route changes. The newly resolved data from the route change seems to be ignored by the component

Given route:

'/steps/:stepNumber': {
  component: 'foo',
  data: function (route, resolve, reject) {
    resolve({stepNumber: route.params.stepNumber});
  }
}

Component:

{
  data: function () {
    return {stepNumber: 0}
  }
}

In the template:

{{stepNumber}}
<a v-link="/steps/99">go to 99</a>

When initially at /steps/1, {{stepNumber}} in the template correctly displays 1.
After clicking on the v-link, the url changes to 99, the component's this.route.params.stepNumber is "99", but the component's this.stepNumber remains 1 (whatever was first resolved by the router)

Asynchronous data hook

I'm finding myself doing a deep watch of router.params in all of my components used by <router-view> in order to reload the data loaded/initialized in my components' created handler. Is there a better way about this? Should this automatically happen for navigation changes in the same router component?

Allow specifying different transitions for navigation and popstate

Sometimes different page transitions are needed when clicking a link vs. clicking the back button.

router view not update when url change

app.coffee

require './app'

Vue = require 'vue'
VueRouter = require 'vue-router'

Vue.use VueRouter

router = new VueRouter history: true
#define routes
router.map require './routes'

#VueResource = require 'vue-resource'
#Vue.use VueResource

# global before
# you can perform async rejection here
router.beforeEach (to, from, allow, deny)->
  console.log "before : " + to.path + "," + from.path

# global after
router.afterEach (to, from)->
  console.log "after : " + to.path + "," + from.path


App = Vue.extend
  components:
    'app-header': require './component/header'
    'app-sidebar': require './component/sidebar'
  data: ->
    'menus': [
      {'name': 'a', 'icon': 'glyphicon glyphicon-header', 'url': '/signin'},
      {'name': 'b', 'icon': 'glyphicon glyphicon-header', 'url': '/hotwords'},
      {'name': 'c', 'icon': 'glyphicon glyphicon-header', 'url': '/a'}
    ]
    'tabs': []
  events:
    'init-view': (data)->
      this.$set 'tabs', data.tabs

router.start App, '#app'

routes.coffee

module.exports =
  '/hotwords':
    component: require './view/hotwords'
  '/signin':
    component: require './view/sign_in'
  '*':
    component: require './view/not_found'

hotwords

<div style="height: 3000px">
hotwords
</div>

sign_in

<div style="height: 3000px">
sign in
</div>

not_found

<div style="height: 3000px">
not found
</div>

index.html

<div class="app" id="app" v-cloak>
 <a v-link="/hotwords">Hotwords</a>
  <div class="main">
    <router-view id="view" class="view" v-transition="view" transition-mode="out-in"></router-view>
  </div>
</div>

when i click Hotwords,router-view not update

refresh the browser

Redirect

use a second recognizer for matching redirects.

Nothing yet ?

Relative paths in v-link don't resolve

Given a route of:

router.map({
  '/parent/:parentId': {
    component: 'parent',
    subRoutes: {
      '/child/:childId': {
        component: 'child'
      }
    }
  }
});

Once already navigated to the route /parent/:parentId,

This works:

<a v-link="/parent/111/child/222"></a>

This doesn't:

<a v-link="child/222"></a>

The url updates but the has no contents. Upon refresh, everything works again.

Wish I could give you a fiddle but I'm having trouble getting the router working at all in there. Here's what I tried so far: http://jsfiddle.net/d3f702gx/7/

Global before hook

Tests

• matching views
• matching nested views
• route context
  • path
  • params
  • query
  • presence in non-router-view components
• router.go()
• v-link
• navigation
• setting correct href
• dynamic link
• active CSS classes (with linkActiveClass option)
• relative query string
• redirect
• simple
• with params
• alias
  • simple
  • with params
• not found
• global before hook (test reject)
• saveScrollPosition option
• transitionOnLoad option
• respect <base> tag
• html5 history
  • root option
• hash history
  • hashbang option
• component route activation lifecycle
  • full pipeline
  • canDeactivate
  • canActivate
  • deactivate
  • activate
  • canReuse
    • boolean
    • function
  • data
    • waitForData
    • reload on reuse

v-link does not correctly resolve bindings

games: [
  { id: 23 },
  { id: 24 }
];

<ul v-repeat="game : games">
    <li><a v-link="/games/{{ game.id }}">{{ game.id }}</a></li>
</ul>

I end up at http://exmaple.com/#!/games/{{ game.id }}, not http://exmaple.com/#!/games/23

Allow directly providing component in route definitions

router.on('/route', {
  component: require('./views/main-view.vue')
})

你好，vue-router预计什么时候能发布？

package isn't available in npm

https://www.npmjs.com/search?q=vue-router

Dynamic URLs with `v-link`

I'd like to be able to use variables within the v-link directive. I tried the following to no avail:

<a v-link="/{{ next }}">go</a>
<a v-link="{{ next }}">go</a>
<a v-link="'/' + next">go</a>
<a v-link="next">go</a>

I'd create a JSFiddle to demonstrate, but the latest dev of vue and vue-router haven't been compiled/committed so that I can use them with rawgit.

make `before` hooks async

bower 里没有么？

Replace true on main router node

Hi,

Just figured out after 3 hours of headache that having the <router-view></router-view> inside the application template and this application setup with the option replace set to true(which is the default behaviour now) leads to child components not working properly (only created hook is called).
So maybe think to add this warning into your upcoming documentation.

Cheers

Route Mapping

moved from Vue roadmap

In terms of the vue-router. Are we mapping routes to something acting like a 'PageController' ( some Vue type/instance ) that would hold configurable child instances? Or is this like a state event to be emitted amongst all instances?

I don't know. I'm having trouble visualizing what is dictated as a 'page' or something centric to represent a container. How do you guys see this fleshing out?

静态服务器没有require方法

Uncaught ReferenceError: require is not defined(anonymous function) @ app.js:3

Data Models / Props not reinitialising

Hello

When I try to use the same component with different params the data is not updating. Even the attached method should be called right?

Here is an example code: http://codepen.io/SeoFood/pen/BNdLzX

Everytime I switch from Message Foo to Bar the attached Method should be called.

Allow specifying default component for an outlet

Maybe

router.on('/root', {
  component: 'a',
  subRoutes: {
    '/matched': {
       component: 'child'
    },
    '*': {
       component: 'default'
    }
  }
})

Path with anchor

How can I get HTML id links like this: https://github.com/vuejs/vue-router#basic-example work with router?

I have route /page mapped to a component, but additionally I have different sections on that page. So I want to access different sections with hash links like: /page#section1. But router is trying to recognize those URLs with hash and taking it as 404, because I have * mapping for 404. If I add /page#section1 mapping to router, it doesn't show 404, but anchors don't work, like you would expect from standard HTML.

Remove bangs when hashbangs are disabled

Similar to #4, but in reverse. We should remove the ! prefix from hashes when hashbangs are disabled (using a replace method).

disable v-link on null value?

<a v-link="{{ previousStep }}" v-class="disabled: ! previousStep">Link</a>

If previousStep is null I get an error:

Uncaught TypeError: Cannot read property 'replace' of null

It should be something like that:

if (e.button === 0) {
          e.preventDefault()
          if (value !== null)
              vm.route._router.go(self.destination)
}

multiple & named router-views

router.on('/route', {
  namedViews: {
    a: { component: 'view-a' },
    b: { component:  'view-b' }
  }
})

<router-view name="a"></router-view>
<router-view name="b"></router-view>

Getting route params outside of router view components

In my use case, I have an app with a template that sets up the page container. The container includes a navigation component on the left and a <router-view> on the right. I'd like to highlight the current active page in the navigation, but I'm not able to access any of the route params from outside the router-view components.

Is there any disadvantage to exposing the route params on the Vue instance used in router.start? Or exposed throughout all VMs? Should I pass this up to the root via an event or v-ref?

怎么配置模版的页面的url？

Prevent route change from triggering DOM updates in a component being transitioned out

Currently, if a component being transitioned out has some content that depends on the route params, the content will change immediately when the transition starts. Ideally we want to prevent this.

My mistake ~~Sub-route component lifecycle hooks aren't called when directly navigating to route~~

e.g. given route /aaa/bbb

Starting at /, navigating to /aaa via v-link triggers lifecycle hooks (mainly looking for ready and attached), but refreshing the page or directly inputing the url does not trigger the lifecycle hooks.

Same for when going from /aaa to /aaa/bbb

v-link can only be used inside a router-enabled app

Here is my main.js

var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);

var router = new VueRouter({
  history: true,
  root: window.Config.Site.base
});

var app = new Vue({

  el: 'body',

  components: {
    test: {
      template: "<h3>teeest</h3>"
    },

    other: {
      template: "<h3>ooother</h3>"
    }
  }
});

router.map({
  '/test': {
    component: 'test'
  },

  '/other': {
    component: 'other'
  }
});

router.start(app, 'body');

But i become the message "v-link can only be used inside a router-enabled app".

But if i make an Vue.extend, and comment the var app = new Vue block out, it works:

var app = Vue.extend({
  components: {
    test: {
      template: "<h3>teeest 2</h3>"
    },

    other: {
      template: "<h3>ooother</h3>"
    }
  }
});

If i uncomment the new Vue block, it does not work and give me the same error. But how can i make my app running without an new Vue?

Require component not working with global registration

Following your example, the following code is not working when register a global component like so:

// Registration (file ->inbox/index.js)

module.exports = Vue.component('my-component, {});

// Require inside router.map function :

'/inbox': {
    component: require('./inbox/index.js')
}

Pushback for not-root urls does not work

I have the following url for my project: http://localhost:1337/project/public

If i declare my routes with this schema:

router.map({
  '/test': {
    component: 'test'
  },

  '/other': {
    component: 'other'
  }
});

and my navigation:

<a v-link="/test">TEST</a>
<a v-link="/other">OTHER</a>

it redirects me to http://localhost:1337/other. So, if i change the routes wit ./, it works with my url, but when i go back in browserhistory, nothing happens in my view:

router.map({
  './test': {
    component: 'test'
  },

  './other': {
    component: 'other'
  }
});

<a v-link="./test">TEST</a>
<a v-link="./other">OTHER</a>

ERR_TO_MANY_REDIRECTS after livereload in Electron

Output in the developer tools console:
GET file:/// net::ERR_TOO_MANY_REDIRECTS
Navigated to data:text/html,chromewebdata

Page source after livereload (elements tab):
<html><body></body></html>

respect `<base>` tag

在组件生命周期钩子函数里怎么拿到请求参数？

router.map({
    "/user/:userId":{
        template:"省略",
        created: function () {
            //在这里怎么拿到userId
        }
    }
})

router view怎么控制父容器的数据？

//app

 <app-sidebar menus="{{menus}}"></app-sidebar>
  <app-header tabs="{{tabs}}"></app-header>

  <div class="main">
    <router-view id="view" class="view" v-transition="view" transition-mode="out-in"></router-view>
  </div>

//route

module.exports =
  template: require './template.html'
  data: ->
    menus: [
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/hotwords'},
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/a'}
    ],
    tabs: [
      {'name': '热词', 'icon': 'glyphicon glyphicon-header'},
      {'name': '热词', 'icon': 'glyphicon glyphicon-header'}
    ]

怎么把 menus 给app-sidebar ,如果写在view里面，每个view都要写一次

Route aliases please!

It would be great to be able to alias routes, since sometimes it makes sense to nest routes based on which layout they use, but I don't want to show that in the URL

/basic/home, /basic/article/ and /minimal/some-other-thing

I want to just be able to use /home and /article but still use the nested views.

Can almost do this using route.redirect, but the route changes in that case

Passing props callbacks

hi,

How do I pass a prop callback to the parent in this context ?

Is it something like in the template of the component.

And in the child component.

props: ['on-register'],

register: function(e){
var self = this,
self.onRegister(someData);
}

Can I do it like this ?

v-link doesn't work with just standalone querystring in nested route e.g. `v-link="?param=value"`

If on route /foo,

This doesn't work:

<a v-link="?param=value">link</a>

The route becomes /?param=value

This does:

<a v-link="/foo?param=value">link</a>

The route is as desired /foo?param=value

Bootstrap breaks routing

When passing in { hashbang: true } to the router the following occurs:

• v-link do not generate #! urls
• The router does not respond to the #! urls, only regular paths

<div id="app">
  <a v-link="dragon">Dragon</a>
  <router-view v-transition="fade" transition-mode="out-in"></router-view>
</div>

var App = Vue.extend({

    template: '<div v-link="dragon">Dragon</div><router-view></router-view>',

    components: {
        dragon: {
            template: 'here be dragons'
        }
    }
});
var router = new VueRouter({
    hashbang: true
});

router.map({
    'dragon': {
        component: 'dragon'
    }
});
router.start(App, '#app');

Expected behaviour:

url: example.com
shows a link with dragon

clicking the 'dragon' link changes the URL to 'example.com/#!/dragon'
'here be dragons' is now shown below the 'dragon' link

Current behaviour:

url: example.com
shows a link with dragon

clicking the 'dragon' link changes the URL to 'example.com/dragon'
'here be dragons' is now shown below the 'dragon' link

dynamic HTML with links

Hey

I get via an API, HTML containing links :

{
  "html":"<a href='/fr/hello-world'>Hello world</a>"
}

To avoid the page reloads on click, I need to apply the v-link directive right ?
So I create another directive which compiles my DOM element.

var a = this.el.querySelectorAll('a');
_.forEach(a, function(el) {
  el.setAttribute('v-link', el.getAttribute('href'));
  _this.vm.$compile(el);
});

It works like I want, but maybe there is a more "official" way to do this ?

In any case, bravo for the hard work behind Vue.js 👍

helper for highlighting current active link

similar to ui-router's ui-sref-active

v-link could not update view.

menus: [
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/hotwords'},
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/a'}
    ]

<ul>
    <li v-repeat="menus">
      <a v-link="{{url}}">
        <i class="{{icon}}" aria-hidden="true"></i>
        <span>{{name}}</span>
      </a>
    </li>
  </ul>


module.exports =
  '/hotwords':
    component: require './view/hotword'
  '*':
    component: require './view/notfound'

<router-view id="view" class="view" v-transition="view" transition-mode="out-in"></router-view>

点击v-link 链接，router-view 没有更新

v-link: opening new window should set hash

When using v-link like <a v-link="/dash">Dash</a> will generate the html <a href="/dash">Dash</a>.
Since the directive binds click it will work when clicking with that window, however when opening in a new window it will use the href as the path instead of as the hash.

Possible fix lafka@42370f7 but i want feedback before i create a pull request.

In general not prefixing with the hash will also break when doing refreshes (unless your server is specifically configured to always load the index)

Should the app avoid pushState and have vue-router accept a configuration, or should one always use hashes?

Uncaught TypeError: Cannot read property 'entry**deep**' of null

Moved from yyx990803/vue#864

https://github.com/yyx990803/vue/blob/dev/src/api/data.js#L74

I'll attempt to reproduce this in a JSFiddle, but this happens when navigation (with vue-router) before I'm able to load external data (entry) into the VM. The same component had a deep watcher set up on entry, then entry is unset before trying to load a new entry (caused by navigation).

Option for preserving scroll position

html5 history模式和hash模式是否可以支持配置

我看源码里是自动判断，然后进行初始化。
只得手动调用router._initHashMode()。

Use pushState for hash mode also if supported

Use replace when "correcting" hashbangs

https://github.com/vuejs/vue-router/blob/master/src/index.js#L158

If I have hashbangs enabled and I navigate to a URL like /#/some/path, it gets corrected to /!#/some/path. However, the correction adds an entry to the history, essentially breaking the back button (because going back immediately redirects to the same page again).

It looks like we can take advantage of history.replaceState to overcome this:
http://stackoverflow.com/a/9282379/143455

Alternatively, location.replace may work too (although I'm not sure if the hash change will affect the DOM if the router-view doesn't actually change).