Let's first look at what a route is. It's a hyperlink
1, Renderings
The hyperlink a tag above and the frame tag below
If Vue is replaced, the router link tag is above and the router view tag is below
2, Vue router forming code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/a">home page</router-link>
<router-link to="/b">news</router-link>
<router-link to="/c">commodity</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>A home page</div>`};
const b = {template:`<div>A pile of news</div>`};
const c = {template:`<div>A pile of goods</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c}
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter
})
</script>
</body>
</html>
3, Code components
Step 4 can be written into step 5
const router = new VueRouter({
routes:[
{path:"/a",component:a}
]
});4, Dynamic matching
1. Matching parameters
If you have parameters, you can write: id in step 4
const routes=[
{path:'/d/:id',component:d},
],Then, when displaying the content in step 2, you can obtain the dynamic parameter id with {{$route.params.id}}
const d = {template:`<div>Commodity id: {{$route.params.id}}</div>`};2. Match all remaining pages
You can match all pages with / * and put it at the end of the matching route. You will match the above first and all the rest
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
{path:'/*',component:d},
];The above code will match a, b and c first in order, and the rest will match / *, and display component d
3. Match priority
In the order of definition, the priority of the above code is a > b > C >*
5, Component nesting
For component nesting, you only need to add a child in the routing relationship. Note here: aa is not in front of it/
const routes=[
{
path:'/a',
component:a,
children:[
{path:'aa',component:aa},
{path:'bb',component:bb},
]
},
{path:'/b',component:b},
{path:'/c',component:c},
];When requesting, use the < router link to = "/ A / BB" > sub page BB < / router link >
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/a">home page</router-link>
<router-link to="/a/aa">Subpage aa</router-link>
<router-link to="/a/bb">Subpage bb</router-link>
<router-link to="/b">news</router-link>
<router-link to="/c">commodity</router-link>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {
template:
`
<div>
A home page
<hr>
<router-view></router-view>
</div>
`,
};
const b = {template:`<div>A pile of news</div>`};
const c = {template:`<div>A pile of goods</div>`};
const aa = {template:`<div>Subcomponents aaa oh</div>`};
const bb = {template:`<div>Subcomponents bbb oh</div>`};
const routes=[
{
path:'/a',
component:a,
children:[
{path:'aa',component:aa},
{path:'bb',component:bb},
]
},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter
})
</script>
</body>
</html>
design sketch
6, Programming navigation
< router link to = "/ a" > Home Page < / router link > ===> $ router.push("a")
This $route is the object myroute defined in step 4
It can be written like this when in use
methods:{
toindex(){
myrouter.push("/a")
}
}In addition to push, there are replace and go
The function of replace is the same as that of push, but there is no history record. The parameter of go is an integer, indicating a few steps forward or backward
First write a piece of code with push and go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <router-link to="/a">home page</router-link> -->
<button @click="toindex">Home page 1</button>
<!-- <router-link to="/b">news</router-link> -->
<button @click="tob">Message 2</button>
<!-- <router-link to="/c">commodity</router-link> -->
<button @click="toc">Commodity 3</button>
<!-- One step ahead -->
<button @click="goforward">forward</button>
<!-- Step back -->
<button @click="goback">back off</button>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>A home page 1</div>`};
const b = {template:`<div>A pile of messages 2</div>`};
const c = {template:`<div>A pile of goods 3</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter,
methods:{
toindex(){
myrouter.push("/a")
},
tob(){
myrouter.push("/b")
},
toc(){
myrouter.push("/c")
},
goforward(){
myrouter.go(1)
},
goback(){
myrouter.go(-1)
}
}
})
</script>
</body>
</html>
Depending on the operation effect, the direction key of the browser in the upper left corner can be used because there are historical browsing records. The function of go is to front and back. However, in addition to 1 and - 1, any integer can be written. Of course, if there are not so many browsing records, nothing will be displayed
Another code of replace and go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <router-link to="/a">home page</router-link> -->
<button @click="toindex">Home page 1</button>
<!-- <router-link to="/b">news</router-link> -->
<button @click="tob">Message 2</button>
<!-- <router-link to="/c">commodity</router-link> -->
<button @click="toc">Commodity 3</button>
<!-- One step ahead -->
<button @click="goforward">forward</button>
<!-- Step back -->
<button @click="goback">back off</button>
</div>
<div >
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
const a = {template:`<div>A home page 1</div>`};
const b = {template:`<div>A pile of messages 2</div>`};
const c = {template:`<div>A pile of goods 3</div>`};
const routes=[
{path:'/a',component:a},
{path:'/b',component:b},
{path:'/c',component:c},
];
const myrouter = new VueRouter({
routes
});
var vm = new Vue({
el:"#app",
router:myrouter,
methods:{
toindex(){
myrouter.replace("/a")
},
tob(){
myrouter.replace("/b")
},
toc(){
myrouter.replace("/c")
},
goforward(){
myrouter.go(1)
},
goback(){
myrouter.go(-1)
}
}
})
</script>
</body>
</html>
When running, the direction keys in the upper left corner of the browser cannot be used, nor can go, because replace has no browsing record
7, Named route
This is to add a name attribute to the routing correspondence
{path:'/a',name:'jack', component:a}Use object when using
<router-link :to="{name:'jack'}">home page</router-link>8, Named view
Just like naming routes, add a name attribute to the view, so that a route can correspond to multiple views
View plus name:
<div > <router-view></router-view> <router-view name="viewa"></router-view> <router-view name="viewb"></router-view> </div>
Routing plus correspondence. The component here has an s because there are multiple views
const routes=[
{path:'/a',component:a},
{
path:'/b',
components:{
default:a,
viewa:b,
viewb:c,
}
},
];Operation effect
9, Redirection and alias
1. Redirect
Write / B directly in the routing correspondence, so that accessing / a will directly redirect to the content of / b
{path:'/a',redirect:'/b'}
2. Alias
This alias is almost as useful as redirection
{path:'/a',redirect:'/b'}/When a redirects to / b, access a and open b
{path:'/a',component:aa,alias:'/b'}/When the alias of a is / b, access a, open a, access b, and open a
When a has an alias, it does not affect itself, but affects the "alias"
10, Routing component parameters
1. Pass parameters with $route
In the routing correspondence, use / a/:id to pass parameters
In the display component, use {{$route.params.id}} to get parameters
2. Pass parameters with props
Can be decoupled from $route
Add props attribute in the routing relationship, and use props to represent the attribute in the display template
That's all for the basic use of Vue routing
For advanced contents, please refer to: Vue routing official document