Of Stack

Vue. js: Introduction to Routing Using Vue Router 2

  • 2021-07-22 09:05:35
  • OfStack

Note: vue-router 2 is only available for Vue2.x, and here is how to use vue-router 2 for routing based on vue 2.0.

npm installation is recommended. 


npm install vue-router

1. Use routing

In main. js, you need to explicitly install the routing feature: 


import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
//1. Define components, which are used here from other files import Come in 
import index from './components/index.vue'
import hello from './components/hello.vue'
//2. Define a route 
const routes = [
{ path: '/index', component: index },
{ path: '/hello', component: hello },
]
//3.  Create  router  Instance, and then pass  `routes`  Configure 
const router = new VueRouter({
 routes
})
//4.  Create and mount the root instance. Pass  router  Configure parameter injection routing, so that the whole application has routing function 
const app = new Vue({
  router,
 render: h => h(App)
}).$mount('#app')

After the above configuration, the component to which the route matches will be rendered to the App. vue < router-view > < /router-view >

Then this App. vue should read like this: 


<template>
 <div id="app">
      <router-view></router-view>
 </div>
</template>

In index. html, it should be written like this: 


<body>
<div id="app"></div>
</body>

This will mount the rendered page into the div where id is app.

2. Redirect redirect 


const routes = [
{ path: '/', redirect: '/index'},   //  Go in this way /  It will jump to /index
{ path: '/index', component: index }
]

3. Nested routing 


const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
] }
]

You can access the info component through the/index/info

4. Load lazily 


const routes = [
{ path: '/index', component: resolve => require(['./index.vue'], resolve) },
{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

By lazy loading, you don't load all the components at once, but only when you access that component will you load that one. For applications with more components, the first loading speed will be improved.

5. < router-link >

In vue-router 1, the < a v-link="{path:'/index'}" > < /a >

In vue-router 2, the < router-link > < /router-link > Replace the a tag in version 1 


<!--  String  -->
<router-link to="home">Home</router-link>
<!--  Render result  -->
<a href="home" rel="external nofollow" >Home</a>

<!--  Use  v-bind  Adj.  JS  Expression  -->
<router-link v-bind:to="'home'">Home</router-link>

<!--  Don't write  v-bind  You can also, just like binding other attributes 1 Sample  -->
<router-link :to="'home'">Home</router-link>

<!--  Ibid.  -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!--  Named route  -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!--  With query parameters, the following result is  /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

6. Routing information objects

1.$route.path

A string that corresponds to the path of the current route and always resolves to an absolute path, such as "/foo/bar".

2.$route.params

An key/value object, containing dynamic fragments and fully matched fragments, is an empty object without routing parameters.

3.$route.query

1 key/value object representing the URL query parameters. For example, for the path/foo? user = 1, then there is $route. query. user = = 1, and if there are no query parameters, it is an empty object.

4.$route.hash

The hash value of the current route (without #), or an empty string if there is no hash value.

5.$route.fullPath

The parsed URL contains the query parameters and the full path of hash.

6.$route.matched

1 Array containing routing records for all nested path fragments of the current route. The routing record is a copy of the object in the routes configuration array (also in the children array).

To sum up the above, one main. js with redirection, nested routing and lazy loading is as follows: 


import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
 routes:[
  { path: '/', redirect: '/index' },
  { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
children:[
     { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
    ]
  },
  { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
 ]
})
const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')
Related articles: