vue.js中Vue-router 2.0基础实践教程

前言

Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router 2.0的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：

一、基础用法：

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <!-- 使用 router-link 组件来导航. --> 
  <!-- 通过传入 `to` 属性指定链接. --> 
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
  <router-link to="/foo">Go to Foo</router-link> 
  <router-link to="/bar">Go to Bar</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的组件将渲染在这里 --> 
 <router-view></router-view> 
</div> 
 
<template id='foo'> 
 <p>this is foo!</p> 
</template> 
<template id='bar'> 
 <p>this is bar!</p> 
</template> 

// 1. 定义（路由）组件。 
// 可以从其他文件 import 进来 
const Foo = { template:'#foo' }; 
const Bar = { template:'#bar' }; 
// 2. 定义路由 
// 每个路由应该映射一个组件。 其中"component" 可以是 
// 通过 Vue.extend() 创建的组件构造器， 
// 或者，只是一个组件配置对象。 
const routes = [ 
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]; 
// 3. 创建 router 实例，然后传 `routes` 配置 
// 你还可以传别的配置参数, 不过先这么简单着吧。 
const router = new VueRouter({ routes:routes }); 
// 4. 创建和挂载根实例。 
// 记得要通过 router 配置参数注入路由， 
// 从而让整个应用都有路由功能 
const app = new Vue({ router:router }).$mount('#app'); 

二、动态路由匹配：

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo/post/123">Go to Foo</router-link> 
  <router-link to="/user/bar/post/456">Go to Bar</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <p>User:{{ $route.params.id }},Post:{{$route.params.post_id}}</p> 
</template> 

// 1. 定义组件。 
const User = { 
 template:'#user', 
 watch:{ 
  '$route'(to,from){ 
   console.log('从'+from.params.id+'到'+to.params.id); 
  } 
 } 
}; 
// 2. 创建路由实例 (可设置多段路径参数) 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id/post/:post_id',component:User } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app'); 

三、嵌套路由：

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
  <router-link to="/user/foo/profile">Go to profile</router-link> 
  <router-link to="/user/foo/posts">Go to posts</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <div> 
  <h2>User:{{ $route.params.id }}</h2> 
  <router-view></router-view> 
 </div> 
</template> 
 
<template id="userHome"> 
 <p>主页</p> 
</template> 
 
<template id="userProfile"> 
 <p>概况</p> 
</template> 
 
<template id="userPosts"> 
 <p>登录信息</p> 
</template> 

// 1. 定义组件。 
const User = { 
 template:'#user' 
}; 
const UserHome = { 
 template:'#userHome' 
}; 
const UserProfile = { 
 template:'#userProfile' 
}; 
const UserPosts = { 
 template:'#userPosts' 
}; 
// 2. 创建路由实例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User, 
   children:[ 
    // 当 /user/:id 匹配成功， 
    // UserHome 会被渲染在 User 的 <router-view> 中 
    { path: '', component: UserHome}, 
    // 当 /user/:id/profile 匹配成功， 
    // UserProfile 会被渲染在 User 的 <router-view> 中 
    { path:'profile', component:UserProfile }, 
    // 当 /user/:id/posts 匹配成功 
    // UserPosts 会被渲染在 User 的 <router-view> 中 
    { path: 'posts', component: UserPosts } 
   ] 
  } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app'); 

四、编程式路由：

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <h2>User:{{ $route.params.id }}</h2> 
</template> 
 
<template id="register"> 
 <p>注册</p> 
</template> 

// 1. 定义组件。 
const User = { 
 template:'#user' 
}; 
const Register = { 
 template:'#register' 
}; 
// 2. 创建路由实例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User }, 
  { path:'/register', component:Register } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app'); 
 
//4.router.push(location) 
router.push({ path: 'register', query: { plan: 'private' }}); 

五、命名路由：

<div id="app"> 
 <h1>Named Routes</h1> 
 <p>Current route name: {{ $route.name }}</p> 
 <ul> 
  <li><router-link :to="{ name: 'home' }">home</router-link></li> 
  <li><router-link :to="{ name: 'foo' }">foo</router-link></li> 
  <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> 
 </ul> 
 <router-view class="view"></router-view> 
</div> 
 
<template id='home'> 
 <div>This is Home</div> 
</template> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 

const Home = { template: '#home' }; 
const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { path: '/', name: 'home', component: Home }, 
  { path: '/foo', name: 'foo', component: Foo }, 
  { path: '/bar/:id', name: 'bar', component: Bar } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app'); 

六、命名视图：

<div id="app"> 
 <router-link to="/">Go to Foo</router-link> 
 <router-view class="view one"></router-view> 
 <router-view class="view two" name="a"></router-view> 
 <router-view class="view three" name="b"></router-view> 
</div> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 
 
<template id='baz'> 
 <div>This is baz</div> 
</template> 

const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
const Baz = { template: '#baz' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { 
   path: '/', 
   components: { 
    default:Foo, 
    a:Bar, 
    b:Baz 
   } 
  } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app'); 

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# vuerouter  # 2.0  # vue  # router  # 2.0文档  # Vuejs+vue-router打包+Nginx配置的实例  # vue系列之requireJs中引入vue-router的方法  # vue.js vue-router如何实现无效路由(404)的友好提示  # Vue.js实战之利用vue-router实现跳转页面  # VueJs路由跳转——vue-router的使用详解  # Vue.js路由组件vue-router使用方法详解  # Vue.js第二天学习笔记（vue-router）  # JavaScript封装Vue-Router实现流程详解  # 都有  # 在这里  # 相关内容  # 你还  # 一大  # 来看看  # 这篇文章  # 只是一个  # 谢谢大家  # 这么简单  # 少不了  # 而让  # 路由功能  # 有疑问  # template  # import  # const  # Bar 

相关文章： 建站VPS配置与SEO优化指南：关键词排名提升策略  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何零基础在云服务器搭建WordPress站点？  如何在服务器上三步完成建站并提升流量？  如何快速完成中国万网建站详细流程？  深入理解Android中的xmlns:tools属性  上海网站制作开发公司,上海买房比较好的网站有哪些？  如何快速搭建自助建站会员专属系统？  如何快速搭建高效香港服务器网站？  网站制作说明怎么写,简述网页设计的流程并说明原因？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  如何将凡科建站内容保存为本地文件？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  网站制作和推广的区别,想自己建立一个网站做推广，有什么快捷方法马上做好一个网站？  如何通过网站建站时间优化SEO与用户体验？  网站制作壁纸教程视频,电脑壁纸网站？  简历在线制作网站免费,免费下载个人简历的网站是哪些？  网站制作模板下载什么软件,ppt模板免费下载网站？  深圳网站制作平台,深圳市做网站好的公司有哪些？  开封网站制作公司,网络用语开封是什么意思？  如何快速搭建虚拟主机网站？新手必看指南  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  javascript基本数据类型及类型检测常用方法小结  临沂网站制作企业,临沂第三中学官方网站？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何在阿里云部署织梦网站？  内部网站制作流程,如何建立公司内部网站？  外贸公司网站制作哪家好,maersk船公司官网？  广平建站公司哪家专业可靠？如何选择？  定制建站流程解析：需求评估与SEO优化功能开发指南  建站之星后台管理系统如何操作？  香港服务器部署网站为何提示未备案？  ,巨量百应是干嘛的？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  制作网站的基本流程,设计网站的软件是什么？  大连 网站制作,大连天途有线官网？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  公司网站制作价格怎么算,公司办个官网需要多少钱？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  大型企业网站制作流程,做网站需要注册公司吗？  盘锦网站制作公司,盘锦大洼有多少5G网站？  宝塔Windows建站如何避免显示默认IIS页面？  如何在Ubuntu系统下快速搭建WordPress个人网站？  建站之星安装步骤有哪些常见问题？  Android滚轮选择时间控件使用详解  TestNG的testng.xml配置文件怎么写  高端智能建站公司优选：品牌定制与SEO优化一站式服务