Sharing of basic routing examples of vue-router-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Sharing of basic routing examples of vue-router

小云云

Jan 15, 2018 am 11:22 AM

vue-router share Example

This article mainly introduces relevant information about the detailed explanation of vue-router routing basics. I hope this article can help everyone understand and master this part of the content. Friends in need can refer to it. I hope it can help everyone.

vue-router Detailed explanation of routing basics

Today I summarized the basics of vue-route and the officially recommended routing by vue.

1. Getting started

HTML

<p id="myp">
 <h1>简单路由</h1>
 <router-link to="/foo">Go to foo</router-link>  
 <router-link to="/bar">Go to bar</router-link>  

// 渲染出口
 <router-view></router-view>
</p>

Copy after login

Create template (component):

(You can also use import to introduce external components)

  var foo={template:"<p>我是foo 组件</p>"};
  var bar={template:"<p>我是bar 组件</p>"};

Copy after login

Component injection routing:

var routes = [
   {path:&#39;/foo&#39;,component:foo},
   {path:&#39;/bar&#39;,component:b ar},
  ];

Copy after login

Create a routing instance:

// 这里还可以传入其他配置
const router = new VueRouter({
   routes   // （缩写）相当于 routes: routes; 
  });

Copy after login

Note that there is no 'r' in routes here (do not write it as routers)

Create a vue instance (and Mounting instance)

 var routerVue = new Vue({
   router
  }).$mount("#myp");

Copy after login

2. Dynamic routing matching

Sometimes what we need is the same template structure, At that time, the data was different, which meant that we wanted to connect logged-in users with different IDs to the same page, but we wanted to display independent information for each user. At this time, we used dynamic routing matching.

Dynamic routing mainly uses the global $route.params and the dynamic parameters of the route. The params API of the global route stores all the parameters of the route. The parameters of the path are marked with ":":

HTML

<p id="myp">
// 点击对应链接时传入对应参数foo 和 bar
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</p>

Copy after login

const User = {
   template:&#39;<p>我的ID是{{ $route.params.id }}</p>&#39;,
// 在路由切换时可以观察路由
   watch:{
    &#39;$route&#39;(to,form){
     console.log(to); //要到达的
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
     {path:&#39;/user/:id&#39;,component:User} // 标记动态参数 id
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

Copy after login

3. Nested routing

1. Nested routing is about that we can render the in . At this time, we need to use children when configuring the route.

For example :

HTML：

<p id="myp">
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</p>

Copy after login

JS：

const User = {
   template:&#39;<p><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></p>&#39;,
   }

   // 子路由
   const userChildOne = {
    template:&#39;<p>我是 userChildOne</p>&#39;
   }
   const userChildTwo = {
    template:&#39;<p>我是 userChildTwo</p>&#39;
   }
  const router = new VueRouter({
   routes:[
     {path:&#39;/user/:id&#39;,component:User,
      children:[ // 用法和参数和routes 一样
       {path:"/user/childone",component:userChildOne},
       {path:"/user/childtwo",component:userChildTwo}
      ]

     }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

Copy after login

四, Named route

1. Name the route to specify the route jump, and use the parameters name and v-bind

HTML:

<p id="myp">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:&#39;userOne&#39;,params:{userId:&#39;123&#39;}}">Go to foo</router-link> 
 <router-link :to="{name:&#39;userTwo&#39;,params:{userId:&#39;456&#39;}}">Go to bar</router-link> 

  <router-view></router-view>
</p>

Copy after login

JS:

const User = {
   template:&#39;<p>我的ID是{{ $route.params.userId }}</p>&#39;,
   watch:{
    &#39;$route&#39;(to,form){
     console.log(to);
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
   // name 一一对应上
     {path:&#39;/user/:userId&#39;,name:"userOne",component:User},
     {path:&#39;/user/:userId&#39;,name:"userTwo",component:User}
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

Copy after login

5. Naming the view

1. Name the rendering view router-view. To specify which view renders the component

HTML:

<p id="myp">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:&#39;userOne&#39;,params:{userId:&#39;123&#39;}}">Go to foo</router-link> 
 <router-link :to="{name:&#39;userTwo&#39;,params:{userId:&#39;456&#39;}}">Go to bar</router-link> 
<!-- 视图命名 如果不写name 则为默认为 default-->
  <router-view></router-view>
  <router-view name=&#39;b&#39;></router-view>
</p>

Copy after login

JS：

// 四个模板
  const UserA = {
   template:&#39;<p>我是one,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const UserB = {
   template:&#39;<p>我是two,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const UserC = {
   template:&#39;<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>&#39;,
  }
  const UserD = {
   template:&#39;<p>我是four,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const router = new VueRouter({
   routes:[
   // name 一一对应上
     { 
      path:&#39;/user/:userId&#39;,
      name:"userOne",
      components:{ // 注意这里为components 多个“ s ”
        default:UserA,
        b:UserB
      }
     },
     { 
      path:&#39;/user/:userId&#39;,
      name:"userTwo",
      components:{
        default:UserD,
        b:UserC
      }
    }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

Copy after login

6. Redirection and Alias

Redirection and alias, first let me explain what redirection and alias are

"Redirect" means , when the user visits /a, the URL will be replaced with /b, and then the matching route is /b,

『Alias』 The alias of /a is /b, which means that when the user visits /b , the URL will remain /b, but the route match will be /a, just as if the user accessed /a. The alias for /a is /b, meaning that when a user accesses /b, the URL remains /b, but the route match is /a, just as if the user accessed /a.

Redirect mainly uses parameters: redirect and alias mainly uses parameters: alias

HTML:

<p id="myp">
 <h2>效果查看地址栏最后面的变化</h2>
 <router-link to="/User/foo">Go to foo</router-link> 
 <router-link to="/User/bar">Go to bar</router-link> 
 <router-link to="/User/Car">Go to bar</router-link> 

  <router-view></router-view>
</p>

Copy after login

JS:

  const User = {
   template:&#39;<p>我是同一个页面</p>&#39;,
  }
  const router = new VueRouter({
   mode:"history",
   routes:[
     { path:&#39;/User/foo&#39;,component:User},
     { path:&#39;/User/bar&#39;,redirect: &#39;/User/foo&#39;,component:User},
     // 重定向的目标也可以是一个命名的路由：
     // 甚至是一个方法，动态返回重定向目标：

     // 别名设置
     { path:&#39;/User/foo&#39;,alias: &#39;/User/Car&#39;}

   ]
  });

  var myVue = new Vue({ 
    router
  }).$mount("#myp")

Copy after login

Related recommendations:

vue-router implements tab tab page

Based on Vue, Vuex, Vue -router implements the animation switching function

Three Vue-Routers to implement jumps between components

The above is the detailed content of Sharing of basic routing examples of vue-router. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

InZoi: How To Apply To School And University

1 months ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Where to find the Site Office Key in Atomfall

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7917

Java Tutorial

1652

CakePHP Tutorial

1411

Laravel Tutorial

1303

PHP Tutorial

1248

Related knowledge

How to share Quark Netdisk to Baidu Netdisk? Mar 14, 2024 pm 04:40 PM

Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.

How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments Mar 25, 2024 am 11:41 AM

1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.

How to share files with friends on Baidu Netdisk Mar 25, 2024 pm 06:52 PM

Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all

Mango tv member account sharing 2023 Feb 07, 2024 pm 02:27 PM

Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703

Vue and Vue-Router: How to share data between components? Dec 17, 2023 am 09:17 AM

Vue and Vue-Router: How to share data between components? Introduction: Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, and

Solve the problem that Discuz WeChat sharing cannot be displayed Mar 09, 2024 pm 03:39 PM

Title: To solve the problem that Discuz WeChat shares cannot be displayed, specific code examples are needed. With the development of the mobile Internet, WeChat has become an indispensable part of people's daily lives. In website development, in order to improve user experience and expand website exposure, many websites will integrate WeChat sharing functions, allowing users to easily share website content to Moments or WeChat groups. However, sometimes when using open source forum systems such as Discuz, you will encounter the problem that WeChat shares cannot be displayed, which brings certain difficulties to the user experience.

How to share ppt Mar 20, 2024 pm 07:51 PM

People in the workplace will be familiar with PPT production, because whether it is a year-end summary or a work report, many companies require it to be presented in the form of PPT. At this time, I encountered a problem, that is, how to share PPT? Don’t worry, the editor below will show you how to share PPT. 1. First select the edited PPT and click Save in the upper left corner (if you are using WPS, you can click Login first). 2. Then click the share icon in the menu bar as shown below. 3. Then the sharing interface as shown below will pop up. You can see that a sharing link will appear. Click to send the link to share. 4. You can also click "Allow friends to edit" in the lower left corner of the picture below, so that friends can also click to edit this PPT. 5. If necessary, give P

Vue-Router: How to use routing meta information to manage routes? Dec 18, 2023 pm 01:21 PM

Vue-Router: How to use routing meta information to manage routes? Introduction: Vue-Router is the official routing manager of Vue.js, which can help us quickly build single-page applications (SPA). In addition to common routing functions, Vue-Router also supports the use of routing meta information to manage and control routing. Routing metainformation is a custom attribute that can be attached to a route, which can help us implement some special logic or permission control. 1. What is routing metainformation? The routing meta information is

See all articles