Vue routing
Vue Router is Vue JS official routing manager. It and Vue JS core deep integration makes it easy to build single page applications. The functions include:
- Nested routing / view tables
- Modular, component-based routing configuration
- Routing parameters, queries, wildcards
- Based on Vue View transition effect of JS transition system
- Fine grained navigation control
- Links with automatically activated CSS class es
- HTML5 history mode or hash mode, automatically degraded in IE9
- Custom scroll bar behavior
Its implementation principle is based on the hash value of url.
install
CDN introduction
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
Direct download
Note: the import needs to be in Vue JS introduced later
<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>
NPM introduction
npm install vue-router
First acquaintance with Vue router
Note: the position of the template definition should be in front of Vue router, otherwise it will not be displayed.
After introducing the resource file, you can use Vue router in a few simple steps.
- Construct routing object
- Set route matching rules (multiple)
- Set route matching rule properties
- Register routing object
- Set placeholder label presentation component
<div id="app">
<a href="#/Login "> login</a>
<a href="#/Register "> register</a>
<!-- Route placeholder label. The result component of route matching will match this label -->
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>Login component</h1>
</div>
</template>
<template id="register">
<div>
<h1>Register components</h1>
</div>
</template>
<script type="text/javascript">
//Define component objects
var login = {
template: '#login'
}
var register = {
template: '#register'
}
//1. Construct the routing object. After introducing the resource file, you can use the routing constructor to create the routing object
var routerObj = new VueRouter({
// 2. Set the route matching rule route. Each route matching rule in the routes group is an object
routes: [
//3. Set the required attribute 1: path to indicate which url path to listen to
// Attribute 2 component, which indicates the display component after listening to the url
{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
})
var app = new Vue({
el: '#app',
//4. Register the routing object so that it can listen for changes in the url address of this page
router: routerObj
})
</script>
Question: can component objects be used by router objects without registration?
Guess: after defining the component object, there should be a method inside the routing constructor that can register the component as a router for special use.
router-link
In addition to using the link form of a tag to change the url path, Vue also provides us with a tag specially used to change the url, that is, the router link tag.
- The router link tag points to the new url through the to attribute.
- The router link label specifies the displayed label style through the tag attribute. The default is a label.
<div id="app"> <router-link to="/login">Sign in</router-link> <router-link to="/register" tag="span">register</router-link> <!-- Route placeholder label. The result component of route matching will match this label --> <router
Use of redirect
In the java back-end, redirection allows us to jump from one interface to another, and it is a similar concept in Vue. It redirects from one path to another by changing the hash value of the url.
var routerObj = new VueRouter({
routes: [
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
//redirect
{
path: '/',
redirect: 'login'
}
]
})
Set router link activation style
If you need to add the style after clicking router link, Vue provides the default activation style. You can set the activation style only by setting the style of the activation style.
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-sr3vukgf-1625814605201) (C: / users / lyj / appdata / roaming / typora / typora user images / image-20210704152416116. PNG)]
.router-link-active{
color: brown;
font-size: 30px;
}
Manually set the activation style: you can also modify the activation style provided by default, which only needs to be defined in the constructor
var routerObj = new VueRouter({
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
{
path: '/',
redirect: 'login'
}
],
linkActiveClass: 'myActive'
})
Routing parameters
Via $router Query method parameters
- The parameters passed through the url path are and can only be used in the corresponding component
<div id="app">
<router-link to="/login?id=10&name=Zhang San">Sign in</router-link>
<router-link to="/register" tag="span">register</router-link>
<router-view></router-view>
</div>
<template id="login">
<h1>Login component ----{{$route.query.id}} -----{{$route.query.name}}</h1>
</template>
<template id="register">
<h1>Register components</h1>
</template>
Via $router Params method parameter transfer
- This method is more in line with our restful style specification and use
<div id="app">
<router-link to="/login/10/Zhang San">Sign in</router-link>
<router-link to="/register" tag="span">register</router-link>
<router-view></router-view>
</div>
<template id="login">
<h1>Login component ----{{$route.params.id}} -----{{$route.params.name}}</h1>
</template>
<template id="register">
<h1>Register components</h1>
</template>
<script type="text/javascript">
var login = {
template: '#login'
}
var register = {
template: '#register'
}
var myRouter = new VueRouter({
routes: [
{
path: '/login/:id/:name',
component: login
},
{
path: '/register',
component: register
}
],
linkActiveClass: 'myActive'
})
var app = new Vue({
el: '#app',
router: myRouter
})
</script>
Route nesting
Sometimes, the dolly problem has to be solved. It is very common to use the routing component again in a routing component. At this time, it is necessary to use the nested routing mechanism provided by vue to realize this function.
<div id="app">
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
<!--Parent component module-->
<template id="account">
<div>
<h1>Account</h1>
<!--Prefix with parent route-->
<router-link to="/account/login">Sign in</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</template>
<template id="login">
<h3>Login component </h3>
</template>
<template id="register">
<h3>Register components</h3>
</template>
<script type="text/javascript">
var account = {
template: '#account'
}
var login = {
template: '#login'
}
var register = {
template: '#register'
}
var myRouter = new VueRouter({
routes: [
{
path: '/account',
component: account,
//Set sub routing rules
children: [
{
//No need to add/
path: 'login',
component: login
},
{
path: 'register',
component: register
}
]
}
]
})
var app = new Vue({
el: '#app',
router: myRouter
})
</script>
Note: when setting a sub route, you should pay attention to the path of the sub route label and the path of the routing rules. Once the rules are not met, it will not be displayed normally.
router realizes classic three column view
When jumping to a URL, we want to display multiple components at the same time, and this function can be realized by using the name attribute of router view and the component group defined by routing rules.
<body>
<div id="app">
<router-view name="header"></router-view>
<div class="boxfix">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<template id="header">
<div>
<h1>
Top navigation bar
</h1>
</div>
</template>
<template id="left">
<div>
<h1>
Side navigation bar
</h1>
</div>
</template>
<template id="main">
<div>
<h1>
Main part
</h1>
</div>
</template>
<script type="text/javascript">
var header = {
template: '#header'
}
var left = {
template: '#left'
}
var main = {
template: '#main'
}
var myrouter = new VueRouter({
routes: [
{
path: '/',
components: {
'header': header,
'main': main,
'left': left
}
}
]
})
var app = new Vue({
el: '#app',
router: myrouter
})
</script>
Note: some keywords cannot be declared as object names. You should pay attention to them
Use watch to monitor the change of routing attribute path
The watch listener can monitor the change of attribute value. As the attribute value of vue, the $router object can also be monitored by watch, and it is more efficient and convenient than other methods in many cases
<div id="app">
<router-link to="/login">Sign in</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>
Login component
</h1>
</div>
</template>
<template id="register">
<div>
<h1>
Register components
</h1>
</div>
</template>
<script type="text/javascript">
var login = {
template: '#login'
}
var register = {
template: '#register'
}
var myrouter = new VueRouter({
routes: [
{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
})
var app = new Vue({
el: '#app',
router: myrouter,
watch: {
'$route.path': function(preval, latval){
console.log(preval+latval)
}
}
})
</script>
In this way, the change of url is dynamically monitored by us.