Summary of how to use Vue.js router (with code)

This article brings you a summary of how to use Vue.js router (with code). It has certain reference value. Friends in need can refer to it. Hope it helps.

is a refresh-free jump for routers

Change the default display label of the label

The default display Dom of the tag is

<router-link to="/" class="nav-link">主页</router-link>

## can be changed through the tag attribute, such as:

<router-link to="/" tag="p" class="nav-link">主页</router-link>

Dynamic binding address

Add a colon before the attribute to of Then attach the variable

to it. As you can see from the code below, the value of to can change with homelink. That is to say, we can affect the value of homelink through the logic we set. This change jump direction

<router-link :to="homelink" tag="p" class="nav-link">主页</router-link>



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }

Input address input error handling

When the user enters an incorrect url address, automatically jump to the set address

Add

{path:'*',redirect:'/'}

const router= new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/menu',component:Menu},
    {path:'/admin',component:Admin},
    {path:'/about',component:About},
    {path:'/login',component:Login},
    {path:'/register',component:Register},
    {path:'*',redirect:'/'}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

to the router configuration item under the main.js file. Enter the non-existent address, and the page will jump to the Home component

Routing name attribute

When configuring routing, give it the name attribute, which can be used as an address in

//main.js
const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},        name属性为 home
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Use the name attribute to specify the routing address (remember to add: in front of to)

        <ul class="navbar-nav">
          <li><router-link :to="{name:&#39;home&#39;}" class="nav-link">主页</router-link></li>
          <li><router-link :to="{name:&#39;menu&#39;}" class="nav-link">菜单</router-link></li>
          <li><router-link to="admin" class="nav-link">管理</router-link></li>
          <li><router-link to="about" class="nav-link">关于我们</router-link></li>
        </ul>

Route jump method

//html
<button @click="goToMenu" class="btn btn-success">Let`s order</button>

//js
 export default {
        name: "Home",
        methods:{
          goToMenu(){
            //跳转到上一次浏览的页面
            this.$router.go(-1);

            //指定跳转的地址
            this.$router.replace(&#39;/menu&#39;)

            //指定跳转路由的名字下（路由name值）
            this.$router.replace({name:&#39;menu&#39;});

            //通过 push 进行跳转(最常用)
            this.$router.push(&#39;/menu&#39;);
            this.$router.push({name:&#39;menu&#39;});
          }
        }
    }

Related recommendations:

Introduction to the router configuration method in vue.js

Vue.jsBuilding RoadHow to solve the error reported by ?

The above is the detailed content of Summary of how to use Vue.js router (with code). For more information, please follow other related articles on the PHP Chinese website!