Template extraction
We've learned about the other definition forms of Vue templates, using < template > < template >.
<!-- Template is pulled out -->
<template id="home">
<div>home page</div>
</template>
<template id="news">
<div>Journalism</div>
</template>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Then when defining the routing component in js:
// 1. Define (route) components.
const Home = { template: '#home' };
const News = { template: '#news' };- 1
- 2
- 3
Routing nesting
The actual application interface is usually composed of multiple nested components.
For example, in our "home page" component, there are also nested "login" and "registration" components, so the URL corresponds to / home/login and / home/reg.
<template id="home">
<! -- Note: a component can only have one root element, so we wrap it in this div -- >
<div>
<h2>Home page</h2>
< router link to = "/ home / login" > log in < / router link >
< router link to = "/ home / reg" > register < / router link >
<! -- the components to which the route matches will be rendered here -- >
<router-view></router-view>
</div>
</template>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
This is the template after accessing / home, where we need to render / home/login and / home/reg.
After completing the above code, the HTML structure is as follows:
- Login and register 2 components
<template id="login">
<div>Login interface</div>
</template>
<template id="reg">
<div>Registration interface</div>
</template>- 1
- 2
- 3
- 4
- 5
- 6
//Define routing components
const Login = { template: '#login' };
const Reg = { template: '#reg' };- 1
- 2
- 3
3. Define route
// 2. Define route
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
Note that we have configured its children in the home route. This is the nested route.
4. All codes of the case are as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- Template is pulled out -->
<template id="home">
<!-- Note: components can only have one root element, so we wrap this div in -->
<div>
<h2>home page</h2>
<router-link to="/home/login">Sign in</router-link>
<router-link to="/home/reg">register</router-link>
<!-- The components to which the route matches will be rendered here -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>Journalism</div>
</template>
<template id="login">
<div>Login interface</div>
</template>
<template id="reg">
<div>Registration interface</div>
</template>
<script type="text/javascript">
// 1. Define (route) components.
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
// 2. Define route
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
]
// 3. Create router instance, and then transfer it to 'routes' configuration
const router = new VueRouter({
routes // (abbreviation) equivalent to routes: routes
})
// 4. Create and mount the root instance.
// Remember to inject routes through router configuration parameters,
// So that the whole application has routing function
const app = new Vue({
router
}).$mount('#box')
// Now, the app has started!
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
