Sharing of basic routing examples of vue-router

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>

Create template (component):

(You can also use import to introduce external components)

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

Component injection routing:

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

Create a routing instance:

##

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

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

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>

JS

##

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

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>

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

四, 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>

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

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>

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

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>

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

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!