Creating a single page application with + vue-router is very simple. Using , we can already form an application by combining components. When you want to add vue-router, what we need to do is map components to routes and then tell vue-router where to render them.
Basic implementation of routing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Implement the current route navigation highlighting */
.router-link-exact-active, .router-link-active {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div >
<!-- The entry to the route，That isaLabel -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<!-- Specify the exit of the route in the page，That is：Where the routing matching component is displayed in the page in the future -->
<router-view></router-view>
</div>
<script src="./"></script>
<!-- Introduced Routing plug-in -->
<script src="./node_modules/vue-router/dist/"></script>
<script>
/*
Steps to use the route:
1. Introduce the js file of the routing plugin
2 Create several components
3 Create an instance of the route through VueRouter and configure routing rules in the parameters
4 Associate the routing instance with the Vue instance and use the router attribute
5 Use router-link in the page to define navigation (a-tag) routing intersections
6 Use router-view in the page to define the route exit (where the route content is displayed in the page)
*/
// The route in Vue is: the corresponding relationship between hash value and component
// The component method can return an object, and this object can represent the current component const Home = ('home', {
template: `<h1>This is Home Components</h1>`
})
const About = ('about', {
template: `<h1>This is About Components</h1>`
})
// Configure routing rules const router = new VueRouter({
// Configure routing rules through routes, value: array routes: [
// Each item in the array represents a specific routing rule // path is used to set the hash value in the browser URL // The componet property is used to set the component corresponding to the hash value { path: '/home', component: Home },
{ path: '/about', component: About },
// redirect redirect: Let the currently matched / jump to the corresponding component of /home, which is the default display: home component { path: '/', redirect: '/home' }
]
})
var vm = new Vue({
el: '#app',
// There is a configuration item in the Vue configuration object called: router // Used to specify the route to use // router: router
router
})
</script>
</body>
</html>
Redirect
Explanation: Redirect / to /home
{ path: '/', redirect: '/home' }
Routing navigation highlight
Note: The currently matching navigation link will automatically add the router-link-exact-active router-link-active class
Routing parameters
- Note: We often need to map all routes matched by a certain pattern to the same component. At this time, we can handle it through routing parameters.
- Syntax: /user/:id
- Use: When matching a route, the parameter value is set to this.$
- Others: You can get query parameters in the URL through $, etc.
// Link:<router-link to="/user/1001">user Jack</router-link>
<router-link to="/user/1002">user Rose</router-link>
//Route:{ path: '/user/:id', component: User }
// User component:const User = {
template: `<div>User {{ $ }}</div>`
}
Nested Routes - SubRoute
- Vue routes can be nested, that is, the route also contains subroutines
- Rule: The parent component contains router-view, and uses children configuration in routing rules
// Parent component:const User = ('user', {
template: `
<div class="user">
<h2>User Center</h2>
<router-link to="/user/profile">Personal Profile</router-link>
<router-link to="/user/posts">post</router-link>
<!-- Subroutines are displayed here -->
<router-view></router-view>
</div>
`
})
// Subcomponents:const UserProfile = {
template: '<h3>Personal Information: Zhang San</h3>'
}
const UserPosts = {
template: '<h3>Position: FE</h3>'
}
{ path: '/user', component: User,
// Subroutine configuration: children: [
{
// When /user/profile matches successfully, // UserProfile will be rendered in User's <router-view> path: 'profile',
component: UserProfile
},
{
// When /user/posts match successfully // UserPosts will be rendered in User's <router-view> path: 'posts',
component: UserPosts
}
]
}
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.