vue-router 路由基础的详解

日期：2020-05-21 栏目：程序人生浏览：次

vue-router 路由基础的详解

今天我总结了一下vue-route基础，vue官方推荐的路由。

一、起步

HTML

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

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

创建模板（组件）：

(也可以用import 引入外部组件)

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

组件注入路由：

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

创建路由实例：

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

注意这里 routes 没有 ‘ r ' (不要写成 routers)

创建vue实例（并挂载实例）

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

二、动态路由匹配

有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。

动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着路由的所有参数，路径的参数用 “ ： ”来标记：

HTML

<div id="myDiv">
// 点击对应链接时传入对应参数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>
</div>

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

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

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

三、嵌套路由

1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children

例如：

HTML：

<div id="myDiv">
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</div>

转载注明出处：http://www.heiqu.com/6079.html

vue-router 路由基础的详解

相关推荐