Vue routing

Related API Description

VueRouter(): new VueRouter({// multiple configuration items}) Route Configuration: [{// Common route path: '/about', Component: about}, {// Automatic redirect route path: '/', redirect: '/about'}] 3. Import router from './router' new Vue({router}) 4. The route component label is used to generate the route link Go to XXX. 2. The route component label is used to display the current route component interfaceCopy the code

Application component: app.vue

<div>
    <! -- Routing link -->
    <router-link to="/about">About</router-link>
    <router-link to="/home">Home</router-link>
    <! Render the current routing component -->
    <router-view></router-view>
</div>
Copy the code

Router module: SRC /router/index.js

export default new VueRouter({
    routes: [
        {
            path: '/', 
            redirect: '/about' 
        },
        {
            path: '/about', 
            component: About
        },
        {
        	path: '/home', 
        	component: Home
        }
    ]
})
Copy the code

Register router: main.js

New Vue({el: '#app', router, render: h => h(app)})Copy the code

Optimizing router Configurations

LinkActiveClass: 'active', // Specifies the class of the selected route linkCopy the code

Summary: Write 3 steps to use routing

<router-link> <router-view>Copy the code

Embedded routines by

Router.js is used to configure nested routines

path: '/home', 
component: home, 
children: [ 
	{ 
		path: 'news', 
		component: News 
	},
	{ 
        path: 'message', 
        component: Message 
	} 
]
Copy the code

Routing link: home.vue

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>
Copy the code

Pass data to the routing component

Method 1: Routing path with parameters (param/query)

1) Configure the children: [{path: 'mdetail/:id', //param parameter path: 'mdetail', //query parameter Component: MessageDetail}] 2) Route path<router-link :to="`/home/message/mdetail/${m.id}`">{{m.title}}</router-link>/ / param parameter<router-link :to="`/home/message/mdetail? id=${m.id}`">{{m.title}}</router-link>This.$route.params.id this.$route.query.idCopy the code

Mode 2: Attributes carry data

<router-view :msg="msg"></router-view>
Copy the code

Caches the routing component object

understand

1) By default, the switched routing component object is released dead and re-created. 2) The user experience can be improved if the routing component object can be cachedCopy the code

coded

<keep-alive>
	<router-view></router-view>
</keep-alive>
Copy the code

Programmatic routing navigation

The relevant API

2) this.$router. Replace (path): 3) this.$router.back(): Request (return) the last recorded route. 4) this. 5) this.$router.go(1): Requests the next recorded routeCopy the code

Global front guard

You can register a global front-guard using router.beforeeach:const router = new VueRouter({ ... })

router.beforeEach((to, from, next) = > {
  // ...}) each guard method receives three arguments:to: Route: indicates the destination Route to be enteredfrom: Route: indicates the Route the current navigation is about to leavenext: FunctionBe sure to call this method to resolve the hook. The execution depends on the call parameters of the next method. Next (): Goes to the next hook in the pipe. If all hooks are executed, the navigation state is confirmed. next(false): interrupts current navigation. If the browser URL changes (either manually by the user or by the browser back button), the URL is reset tofromIndicates the IP address of the route. next('/') or the next ({path: '/'}): jumps to a different address. The current navigation is interrupted and a new navigation is performed. You can pass any position object to next, and you can set things like replace:true, name:'home'And any options used in router-link's to prop or router.push. next(error): (2.4. 0+) if the argument passed to next is oneErrorInstance, the navigation is terminated and the error is passed to the callback registered with router.onerror (). Example: the router. BeforeEach ((to, from, next) = > {
  if(to.path ! = ='/home') {
    if (store.getters.getLoginState) {
      next();
    }
    else {
      next({ path: '/home'}); }}else{ next(); }})Copy the code

Guards within components

BeforeRouteEnter sample

import store from ".. /store";
export default {
  beforeRouteEnter(to, from, next) {
    // called before the corresponding route to render the component is confirmed
    / / no! Can!!!! Get component instance 'this'
    // Because the component instance has not been created before the guard executes
    if(to.path ! = ="/home") {
      if (store.getters.getLoginState) {
        next();
      } else {
        next({ path: "/home"}); }}else{ next(); }}};// If you want to get a vuex attribute, you can get it by importing a Store object because there is no this
Copy the code