Vue.js series of Vue-router (on) (reproduced from the Shuo 1992)

Overview

Vue is great for the practice of single page applications, which is what you would call a more application spa, which you should know about Vue. General single-page applications are based on links between routes or pages, and Vue is based on routing and components, so we'll get to know the next vue-router today. Vue-router is the official Vue.js routing plug-in, it integrates with vue.js depth to set the access path and maps the path and component, we give each component a routing address, and the jump route is equivalent to the component switch. Vue-router content is still more, here I only share my own projects used in the place, other places you can read the document.

Get started with Vue-router here I assume that you have previously used a module engineering approach to a Vue Demo, on this basis we add vue-router. 1. Installation

2. Install the routing plug-in in Project Main.js

Import vue from ' Vue  ' vue-router '  vue.use (vuerouter)  

Footer.vue components

<Template>      <Divclass= "Footer">          <Divclass= "Readtype"v-if= "Readtype.count">{{Readtype.count}}</Div>          <ulclass= "Main-nav">              <Li>                  <Router-link to= " /Home">                      <Iclass= "Icon-nav icon-nav1"></I><span>Home</span>                  </Router-link>              </Li>              <Li>                  <Router-link to= "/quan"V-bind:class= "{Rrouter:activ}">                      <Iclass= "Icon-nav icon-nav2"></I><span>Alumni Circle</span>                  </Router-link>              </Li>              <Li>                  <Router-link to= "/friend">                      <Iclass= "Icon-nav icon-nav3"></I><span>Xueyou</span>                  </Router-link>              </Li>              <Li>                  <Router-link to= "/find">                      <Iclass= "Icon-nav icon-nav4"></I><span>Found</span>                  </Router-link>              </Li>              <Li>                  <Router-link to= "/mine">                      <Iclass= "Icon-nav icon-nav5"></I><span>It's mine</span>                  </Router-link>              </Li>          </ul>      </Div>  </Template>  

Here are a few things to know:

1. Use the Router-link component to navigate.

2. Specify the link by passing in the ' to ' property.

3.<router-link> is rendered as a ' <a> ' label by default

Routed exits

As we said earlier, the route jump is the corresponding component in the rendering, then how the rendered content is displayed in the page, that is, the route exit ' <router-view></router-view> ' do, the route matching the component will be rendered here.

Route exits we can set up in the current assembly or in other components, we will render all components in the largest container App.vue component (the app component in our project is only used as a rendering container).

< Template >    <  ID= "app">      <Router-view></ Router-view >    </ Div >  </ Template >  

Javascript

Define the route file can be directly written in the Main.js file, you can also create a new JS file, because we have a lot of components, so separate the route out to write a router.js file.

//0. If you are programming with a modular mechanism, enter Vue and Vuerouter to invoke Vue.use (Vuerouter)Import vue from ' Vue 'Import Vuerouter from' Vue-router 'vue.use (vuerouter)//1. Define (route) components. //can be import from other files, we generally have built the components to write the routing//so there will be a lot of these statements. Import home from "./components/home"Import Login from"./components/login"//2. Defining RoutesRoutes: [//here with 1.x there is a big difference, have contact with their own see clearly oh{path:‘/‘,//Browser network request to go through the default will be to find the root directory under the domain name,Name: ' Home ',//so we're going to put this component as the default home pageComponent:home}, {path:'/login ', Name:' Login ', Component:login}] //3. Create a router instance and pass ' routes ' configuration//you can also pass other configuration parameters, but first it's so simple. Const ROUTER =NewVuerouter ({//you're going to be a const VAR .Routes//(abbreviation) equivalent to Routes:routes})    //4. Create and mount the root instance. //remember to inject the route through the router configuration parameter,//So that the entire application has a routing functionConst APP =NewVue ({router}). $mount (' #app ')  //now, the app has started! 

Summarize

The previous article first shared here, the main understanding of the following points:
Installation and use of 1.vue-router
2. The writing format in the component template
3. Know the route exit
4. How to define a route
5. Creating route instances and Mount instances

Vue.js series of Vue-router (on) (reproduced from the Shuo 1992)