vuejs / vue-router Goto Github PK
View Code? Open in Web Editor NEW🚦 The official router for Vue 2
Home Page: http://v3.router.vuejs.org/
License: MIT License
🚦 The official router for Vue 2
Home Page: http://v3.router.vuejs.org/
License: MIT License
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>
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 ?
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?
router.on('/route', {
namedViews: {
a: { component: 'view-a' },
b: { component: 'view-b' }
}
})
<router-view name="a"></router-view>
<router-view name="b"></router-view>
similar to ui-router's ui-sref-active
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>
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
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
?
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/
Uncaught ReferenceError: require is not defined(anonymous function) @ app.js:3
router.on('/route', {
component: require('./views/main-view.vue')
})
router.map({
"/user/:userId":{
template:"省略",
created: function () {
//在这里怎么拿到userId
}
}
})
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 没有更新
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).
Similar to #4, but in reverse. We should remove the !
prefix from hashes when hashbangs are disabled (using a replace method).
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
<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)
}
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
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.
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')
}
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
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.
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?
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.
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).
//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都要写一次
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
use a second recognizer for matching redirects.
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 👍
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 ?
When passing in { hashbang: true }
to the router the following occurs:
<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
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>
router.go()
v-link
linkActiveClass
option)saveScrollPosition
optiontransitionOnLoad
option<base>
tagroot
optionhashbang
optionWhen 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)
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
?
我看源码里是自动判断,然后进行初始化。
只得手动调用router._initHashMode()
。
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.
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?
Sometimes different page transitions are needed when clicking a link vs. clicking the back button.
Maybe
router.on('/root', {
component: 'a',
subRoutes: {
'/matched': {
component: 'child'
},
'*': {
component: 'default'
}
}
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.