1. Basic operation steps of VuE-Router:

① Create a routing component

② create a router and map the routing components to routes

③ Register the router

4. Use routing labels to operate or display routing components

: is used to generate routing links

: displays the current routing component page

2. Code cases

2.1 routing components

src/views/About.vue

<template>  <div>About</div></template><script>export default {}</script><style></style>
Copy the code

src/views/Home.vue

<template>  <div>Home</div></template><script>export default {}</script><style></style>
Copy the code

2.2. Active VUE component

src/App.vue

<template> <div> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"><h2>Router Basic - 01</h2></div> </div> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <! --> <router-link to="/about" class="list-group-item"> about </router-link> <router-link to="/home" class="list-group-item">Home</router-link> </div> </div> <! <div class="panel"> <div class="panel-body"> <router-view></router-view> </div> </div> </div> </div> </div></template><script>export default {}</script><style></style>Copy the code

2.3 router

src/router/index.js

/* router */import VueRouter from "vue-router"; import Vue from "vue"; import About from ".. /views/About.vue"; import Home from ".. /views/Home.vue"; Vue.use(VueRouter); Export default new VueRouter({/* Configure n routes to map routing components to routes */ routers: [{path: '/about', component: About }, { path: '/home', component: Home }, { path: '/', redirect: '/about' } ]});Copy the code

2.4. Main Program

src/main.js

Import Vue from 'Vue 'import App from './ app. Vue 'import router from './router'new Vue({/* config object attribute names are fixed and cannot be modified */ el: '# app, components: {} app, the template:' < app / > ', the router / * * / registered router})Copy the code

2.5. Home page

index.html

<! DOCTYPE HTML >< HTML >< head> <meta charset=" utF-8 "> <meta name=" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="./static/css/bootstrap.css"> <title>vue_router_demo</title> <style> .router-link-active{ color: red ! important; } </style> </head> <body> <div id="app"></div> <! -- built files will be auto injected --> </body></html>Copy the code

3. Project sample pictures