How to use routing in vue

Vue’s routing functionality allows managing page navigation in a SPA, mapping URL paths to application components. The usage steps are as follows: Install the Vue routing library. Create a router instance. Install the router to the Vue instance. Use to define a route link. Use to display routing components.

Using routing in Vue

Introduction to Vue routing mechanism

## Routing in #Vue.js is a built-in feature for managing page navigation in a Single Page Application (SPA). It allows developers to create and manage different URL paths that correspond to different components or views of the application.

How to use Vue routing

1. Install the Vue routing library

<code class="bash">npm install vue-router@next</code>

2. Create a router instance

Create a new Vue Router instance in the Vue.js application.

<code class="javascript">import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})</code>

3. Install the router instance into the Vue instance

Install the router instance into the Vue.js instance.

<code class="javascript">new Vue({
  router,
  el: '#app'
})</code>

4. Define the routing link

Use the

tag in the component to define the routing link.

<code class="html"><router-link to="/about">关于我们</router-link></code>

5. Display routing view

Use the

tag in the root component to display the currently activated routing component.

<code class="html"><router-view></router-view></code>

Advanced usage

Dynamic routing

Use a colon (:) to define a dynamic routing segment and then use it in the component

$route.params Access them.

<code class="javascript">const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})</code>

Nested Routing

Nest child routes within parent routes to create more complex hierarchical navigation.

<code class="javascript">const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      children: [
        { path: 'users', component: Users },
        { path: 'products', component: Products }
      ]
    }
  ]
})</code>

Route Guard

Use route guards to perform certain actions before or after a navigation occurs.

<code class="javascript">router.beforeEach((to, from, next) => {
  // ...
})</code>

The above is the detailed content of How to use routing in vue. For more information, please follow other related articles on the PHP Chinese website!