Other operations for Vue.js routing

This time I will bring you other operations of Vue.jsrouting, what are the precautions for using other operations of Vue.js routing, the following is a practical case, let’s take a look one time.

Based on the current path, jump to apple

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

If you want to jump to the root directory, add /

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

If bound, we can also dynamically Modify path

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

If you bind it and don’t want to modify the path dynamically, we can also write it directly.

Note: apple must be enclosed in single quotes, otherwise it will go to data When searching for apple, an error of not finding object

<router-link :to="&#39;apple&#39;">to apple</router-link>

can also be passed. You can also pass the parameter

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

through tag to change the link into a li tag. Of course, you can also set the variable. Into other tags

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

*The above are all declarativeNavigation
Let’s experience the programmatic navigation
You can jump to a specific page through push

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

Application scenario:
Whenever we switch routes, set some operations for him

For example: check the user's login status, if the user is not logged in, jump to it through programmatic navigation Login interface
router.beforeEach(router.push('Login interface'))

I believe you have mastered the method after reading the case in this article. Please come for more exciting information. Pay attention to other related articles on php Chinese website!

Recommended reading:

Vue tag attributes and conditional rendering of Vue.js

List rendering v of Vue.js -for array object subcomponent

What are the precautions for using Vue.js

The above is the detailed content of Other operations for Vue.js routing. For more information, please follow other related articles on the PHP Chinese website!