Package Exports
- vue-route-key
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-route-key) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-route-key
vue-route-key
is a simple plugin for restart component when change route params and query.
Features
- Restart component when change route params and query
- Force restart current component
Why?
First, Let's assume that you have a /profile/:id
and component call an api from created()
.
If you navigate from /profile/1
to /profile/2
, vue-router
does not call created()
.
Because it reuses a current component instead of restart and calls beforeRouteUpdate
.
I found some solutions:
- Use a watch: Is this the best way?
<router-view :key="$route.fullPath"/>
: Very simple and effective. But if you have nested routing, all components are restart. I want to restart a nested component only.
Second, If there is a link to the forum on the nav, people expect that page showing new contents when they click the link.
But nothing happens when they click the link. Because vue-router
blocks navigate to same location.
That is why I made this plugin.
How it works?
This plugin consists of three parts.
- Override
vue-router
: Override thepush
andrelace
ofvue-router
to ignore duplicated error when using force update. - Router hook: This is the core part. It collects params and query information from components matched with current routing, generate a unique key value that can be used in
<router-view>
. - Mixin: This mixin inject the unique key value to component with the name
$routeKey
. It also serves force update feature.
The $routeKey
used as :key
attribute's value in <route-view>
. The component restart by changes of $routeKey
.
<router-view :key="$routeKey[0]" />
Usage
Install
npm install --save vue-route-key
Setup
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueRouteKey from 'vue-route-key';
const router = new VueRouter(/* ... */);
Vue.use(VueRouteKey, {
router, // Install plugin after create a router.
canIncrKey(depth = 0) { // (optional) determine force update
return true;
}
});
App.vue
<router-view :key="$routerKey[0]" />
<!--
append the :key="$routerKey[0]" in <router-view>.
Adjust the index according to the nested level.
-->
Restart component by changes of params and query.
Component.vue
<script>
export default {
// ...
routeKey: [ // Type params and query you want to restart component if they changed.
'params.paramName',
'params.otherParam',
'query.queryName',
'query.otherQuery'
]
// ...
}
</script>
Force update
You can force update by params._forceUpdateIndex
sets depth of nested route-view.
this.$router.push({
name: 'page',
params: {
_forceUpdate: true, // Deprecated
_forceUpdateDepth: 0,
}
});
<router-link :to="{name: 'page', params: {_forceUpdateDepth: 0}}">link</router-link>
NOTE
If canIncrKey()
returns false, force update will be canceled.