When using the project, a page is composed of multiple components, so when jumping to the page, it is not suitable to use traditional href, so vue-router came into being.
Routing actually means pointing. When I click the home button on the page, the home content will be displayed on the page. If I click the about button on the page, the about content will be displayed on the page. Home button => home content, about button => about content, it can also be said to be a mapping. So there are two parts on the page, one is the click part, and the other is the part that displays the content after clicking.
After clicking, how to achieve the correct correspondence? For example, if I click the home button, how can the home content be displayed on the page? This requires configuring the route in the js file.
Official Documentation:/zh-cn/essentials/
The easiest use of Vue-Router
1. Register the route first
2. Register the route into the VM component
3. Define components
4. Page definition jump path
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/"></script>
<script src="lib/vue-router-3.0."></script>
<style type="text/css">
</style>
</head>
<body>
<div >
<!--
becauseVue-routerofhash匹配原则所以我们需要在原定义of路径上加一个#Number -->
<a href="#/login" rel="external nofollow" rel="external nofollow" >Login</a> <a href="#/register" rel="external nofollow" rel="external nofollow" >Register</a> <router-view></router-view>
</div>
</body>
<script>
var login={
template:'<h1>Login component</h1>'
}
var register={
template:'<h1>Register Component</h1>'
}
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj//Register the routing rule object to the VM instance })
</script>
</html>
Use Router-Link instead of a tag
This is mainly done to remove the "#" in the a tag to match the hash address, as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/"></script>
<script src="lib/vue-router-3.0."></script>
<style type="text/css">
</style>
</head>
<body>
<div >
<!--
becauseVue-routerofhash匹配原则所以我们需要在原定义of路径上加一个#Number -->
<!-- <a href="#/login" rel="external nofollow" rel="external nofollow" >Login</a> <a href="#/register" rel="external nofollow" rel="external nofollow" >Register</a>--> <router-link to="/login" tag="span">Log in</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
</body>
<script>
var login={
template:'<h1>Login component</h1>'
}
var register={
template:'<h1>Register Component</h1>'
}
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj//Register the routing rule object to the VM instance })
</script>
</html>
At the same time, we can also use tag tags to render router-link elements. router-link is rendered as a link element by default. Use tag tags to render other elements. The above code is rendered as a span element. No matter what element it renders, it still has a click event that jumps like a connection
Redirection technology and default paths
Default path
We can use the default path to specify the root path, just add the default path to the above route definition method
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/",component:login},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
Redirect method Specify the default path
The same way you can directly redirect to the login path using one line of code. Compared with the default path above, this method is more obvious in the display of url.
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
Highlight settings after routing is selected
Use the default class to highlight
Vue has built-in a highlighted class router-link-active for router-link for router-link, that is, it can be set in your own style.
<style type="text/css">
.router-link-active{
color: red;
font-weight: 800;
font-style: italic;
font-size: 30px;
}
</style>
Use custom class names
When we want to use selected styles defined by third parties, or if we want to define a more concise style, we can use linkActiveClass to define them, that is, specify the class name when routing initialization, and customize the style when specifying the style.
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
],
linkActiveClass:'myactive'
})
Specify style
<style type="text/css">
.router-link-active,.myactive{
color: red;
font-weight: 800;
font-style: italic;
font-size: 30px;
}
</style>
Routing parameters
Pass parameters using query
First, let's set the routing link to specify parameters
<router-link to="/login?id=10&name=zhao">Log in</router-link>
And multiple parameters can be specified and obtained, mainly by redefined component objects to obtain
var login={
template:'<h1>Login component---{{$}}--{{$}}</h1>',
created(){
(this.$)
}
}
Pass parameters using params
First, when defining the route, we use: define the params parameter
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/login/:id/:name",component:login},
{path:"/register",component:register}
],
})
How to pass in actual use
<router-link to="/login/10/zhao">Log in</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
Use in components
var login={
template:'<h1>Login component---{{$}}</h1>',
created(){
(this.$)
}
}
Implementation of routing nesting
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue-2.4."></script>
<script src="lib/vue-router-3.0."></script>
<style type="text/css">
</style>
</head>
<body>
<div >
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template >
<div>
<h1>This is Account Components</h1>
<router-link to="/account/login">Log in</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</template>
<script>
// Component template object var account = {
template: '#tmpl'
}
var login = {
template: '<h3>Login</h3>'
}
var register = {
template: '<h3>Register</h3>'
}
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
// Use the children attribute to implement subroutines. At the same time, do not take / in front of the path of the subroutine, otherwise the request will always start with the root path, which is not convenient for our users to understand the URL address. children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
}
]
})
// Create a Vue instance and get a ViewModel var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
</html>
It is mainly implemented by the children attribute. The above code consists of three easy-to-mistake points.
1. When defining a route, the subroutine does not have '/'
2. Define the child component in the parent component to write the full path of the child component
3. Defining components in the parent component should also add router-view elements.
Case: Router named view implements classic layout
Named views use the components attribute (note that it is not a component) to define routes:
var routerObj = new VueRouter({
routes:[
//The component here can only use component objects, and cannot use the name of the registered template {path:"/",components:{
default:header,
left:leftBox,
main:mainBox
}},
]
})
Several components are defined as follows
var header={
template:'<h1 class="header">Head area</h1>'
}
var leftBox={
template:'<h1 class=left>Left menu area</h1>'
}
var mainBox={
template:'<h1 class="main">Main content area</h1>'
}
We use the name attribute of router-view when using the above named view on the page to define
<div >
<router-view></router-view>
<div >
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
The default named view component will be named by default if it is not set using the named attribute t property name.
Set the style
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
padding: 0;
font-size: 16px;
}
.header{
background-color: #6495ED;
height: 200px;
}
#container{
display: flex;
height: 600px;
}
.left{
flex: 2;
background-color: #0000FF;
}
.main{
flex: 8;
background-color: #8A2BE2;
}
</style>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.