Home > Web Front-end > JS Tutorial > Introduction to the method of vue.js route display setting

Introduction to the method of vue.js route display setting

不言
Release: 2018-08-23 16:30:26
Original
1496 people have browsed it

This article brings you an introduction to the method of vue.js routing display settings. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

①Set path to '/'

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},             //页面第一显示的组件
    {path:'/menu',name:'menu',component:Menu},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});
Copy after login

②Set redirect value (applicable to secondary routing)

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},
    {path:'/about',name:'about',component:About,redirect:{name:'contactLink'},children:[   //二级路由
        {path:'/about/contact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
      ]},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});
Copy after login

Related recommendations:

Code analysis of secondary routing and third-level routing in vue.js

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

The above is the detailed content of Introduction to the method of vue.js route display setting. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template