Summary of how to use Vue.js router (with code)-JS Tutorial-php.cn

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

不言

Release： 2018-08-23 16:21:13

Original

1668 people have browsed it

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>

Copy after login

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

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

Copy after login

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"
    }

Copy after login

Input address input error handling

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

Add

{path:&#39;*&#39;,redirect:&#39;/&#39;}

Copy after login

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:&#39;*&#39;,redirect:&#39;/&#39;}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

Copy after login

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:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

Copy after login

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>

Copy after login

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;});
          }
        }
    }

Copy after login

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!