Vue2 Vue router learning notes

When we use vue to develop a single page project, we always think about three problems

  1. How to select different components according to the path in the address?

  2. Where do you put the selected components?

  3. How to switch components without refresh?

  These three problems can be easily solved by using the Vue router plug-in in vue2

First, we must install the Vue router plug-in

Find our project folder, open and enter NPM I Vue router in the terminal

  Use of routing plug-ins

  Find the main.js file under the project (I practiced. After Vue generated the project, the names of App.vue and main.js were not modified). Add the following code to main.js and start the Vue router plug-in

import Vue from "vue";
import App from "./App.vue";
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);//vue.use (plug-in), install the plug-in in vue

const router = ({
    //Routing configuration
})

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Basic configuration of routing

import A from "A Component path";
import B from "B Component path";
const router = new VueRouter({
    reutes:[//Routing rules
        //When the path matches / A, render the a component
        { path:'/a',component:A},
        //Render the B component when the path matches / b
        { path:'/b',component:b}
    ]
})

  After configuring main.js, find App.vue to modify the configuration, and enter < routerview / > where necessary. The standard here seems to be < router View > < / router View > (I personally prefer the naming method of large hump)

<!-- App.vue -->
<div class="container">
  <div>
    <!-- Public area -->
  </div>
  <div>
    <!-- Page area -->
    <!-- vue-router The matched components will be rendered here -->
    <RouterView />
  </div>
</div>

After talking about the installation and use of routing plug-ins, we will talk about routing mode

Routing mode

The routing mode determines:

1. Where does the route get the access path

2. How does the route change the access path

Vue router provides three routing modes for us to choose from:

1.hash: by default, the route obtains the path from the hash in the browser address bar. Changing the path is also changing the hash part. This routing mode has the best compatibility (but it's not good-looking, ha ha ha ha)

http://localhost:8080/#/blog  -->  /blog
http://localhost:8080/about#/blog  --> /blog

2.history: the route obtains the path from location.pathname in the address bar of the browser. When changing the path, H5 API and history api are used. This mode makes the address bar look most comfortable, but the browser needs to support history api (personally, I think this should be the most used by the company later)

http://localhost:8080/#/blog  -->  /
http://localhost:8080/about#/blog  --> /about
http://localhost:8080/blog  --> /blog

3.abstract: the route obtains the path from memory. Changing the path only changes the value in memory. This mode is usually applied to non browser environments (I feel that the probability of using this mode is basically not, because it is used in environments without browsers)

Memory: /			-->   /
Memory: /about	--> /about
 Memory: /blog	  --> /blog

Routing also has a navigation function

Vue router provides a global component RouterLink. Its rendering result is an a element, and the corresponding href will be generated according to the routing mode

<RouterLink to="/blog">article</RouterLink>
<!-- mode:hash generate -->
<a href="#/Blog "> articles</a>
<!-- mode:history generate -->
<!-- To avoid refreshing the page, vue-router In fact, a click event is added to it, and the default behavior is blocked, which is used inside the event hitory api alternate path -->
<a href="/blog">article</a>

  Active state

1. When our path starts with the navigation path, it will be counted as a match, and the class name router link active will be added to the a element of the navigation path

2. When our path is completely equal to navigation, it will be counted as an exact match, and the class name router link exact active will be added to the a element of the navigation path

We can also add the exact Boolean attribute for RouterLink, and change the matching rule to: you must match exactly to add the matching class name router link active

For example, if the current access path is / blog, then:

Navigation pathexactClass name
/truenothing
/blogfalserouter-link-active router-link-exact-active
/abouttruenothing
/messagetruenothing

For example, if the current access path is / blog/detail/123, then:

Navigation pathexactClass name
/truenothing
/blogfalserouter-link-active
/abouttruenothing
/messagetruenothing

  In addition, you can change the matching class name through the active class attribute and the exact matching class name through the exact active class attribute;

Sometimes we write a project with many hyperlinks. At this time, the product manager who is not the right person may ask you to change one of the hyperlinks. At this time, if we don't need the naming rules of the route, we can only find the corresponding components to modify layer by layer, which is very troublesome, but if we use the naming rules, it is very simple

Naming rules

Use named routes to decouple the system from the path

Modify the routing configuration we wrote before

import A from "A Component path";
import B from "B Component path";
const router = new VueRouter({
    reutes:[//Routing rules
        //When the path matches / A, render the a component
        { name:a, path:'/a',component:A},
        //Render the B component when the path matches / b
        { name:b,path:'/b',component:b}
    ]
})
<!-- towards to Property to pass the routing information object RouterLink The corresponding path will be generated according to the information you pass and the routing configuration -->
<RouterLink :to="{ name:'foo' }">go to foo</RouterLink>

Tags: Vue Vue.js

Posted on Mon, 27 Sep 2021 04:51:33 -0400 by lmninfo