当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-router 路由基础的详解

vue-router 路由基础的详解

2017年12月12日  | 移动技术网IT编程  | 我要评论

黄裳浅识,绥化天气预报一周,三国创世录

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>

js

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>

js：

const user = {
   template:'<div><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></div>',
   }

   // 子路由
   const userchildone = {
    template:'<div>我是 userchildone</div>'
   }
   const userchildtwo = {
    template:'<div>我是 userchildtwo</div>'
   }
  const router = new vuerouter({
   routes:[
     {path:'/user/:id',component:user,
      children:[ // 用法和参数和routes 一样
       {path:"/user/childone",component:userchildone},
       {path:"/user/childtwo",component:userchildtwo}
      ]

     }
   ]
  });

  var myvue = new vue({
    router
  }).$mount("#mydiv")

四、命名路由

1.给路由命名指定路路由跳转，要用到参数name 和 v-bind

html:

<div id="mydiv">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:'userone',params:{userid:'123'}}">go to foo</router-link> 
 <router-link :to="{name:'usertwo',params:{userid:'456'}}">go to bar</router-link> 

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

js:

const user = {
   template:'<p>我的id是{{ $route.params.userid }}</p>',
   watch:{
    '$route'(to,form){
     console.log(to);
     console.log(form);
    }
   }
  }

  const router = new vuerouter({
   routes:[
   // name 一一对应上
     {path:'/user/:userid',name:"userone",component:user},
     {path:'/user/:userid',name:"usertwo",component:user}
   ]
  });

  var myvue = new vue({
    router
  }).$mount("#mydiv")

五、命名视图

1.给渲染视图 router-view 命名，来制定让那个视图渲染组件

html:

<div id="mydiv">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:'userone',params:{userid:'123'}}">go to foo</router-link> 
 <router-link :to="{name:'usertwo',params:{userid:'456'}}">go to bar</router-link> 
<!-- 视图命名 如果不写name 则为默认为 default-->
  <router-view></router-view>
  <router-view name='b'></router-view>
</div>

js：

// 四个模板
  const usera = {
   template:'<p>我是one,id是{{ $route.params.userid }}</p>',
  }
  const userb = {
   template:'<p>我是two,id是{{ $route.params.userid }}</p>',
  }
  const userc = {
   template:'<p>我是three,id是{{ <1ro></1ro>ute.params.userid }}</p>',
  }
  const userd = {
   template:'<p>我是four,id是{{ $route.params.userid }}</p>',
  }
  const router = new vuerouter({
   routes:[
   // name 一一对应上
     { 
      path:'/user/:userid',
      name:"userone",
      components:{ // 注意这里为components 多个“ s ”
        default:usera,
        b:userb
      }
     },
     { 
      path:'/user/:userid',
      name:"usertwo",
      components:{
        default:userd,
        b:userc
      }
    }
   ]
  });

  var myvue = new vue({
    router
  }).$mount("#mydiv")

六、重定向 和 别名

重定向 和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问 /a时，url 将会被替换成 /b，然后匹配路由为 /b，

『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，url 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，url 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
重定向主要用参数：redirect 而别名主要用到参数： alias

html:

<div id="mydiv">
 <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>
</div>

js:

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

     // 别名设置
     { path:'/user/foo',alias: '/user/car'}

   ]
  });

  var myvue = new vue({ 
    router
  }).$mount("#mydiv")

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网