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

总结

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