vue.js中Vue-router2.0基础的示例分析-创新互联

这篇文章主要介绍vue.js中Vue-router 2.0基础的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司联系热线：13518219792，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联公司网页制作领域十多年，包括成都办公窗帘等多个领域拥有多年的网站营销经验，选择创新互联公司，为企业锦上添花。

一、基础用法：

 
 Hello App! 
  
   
   
   
  Go to Foo 
  Go to Bar

this is foo!

this is bar!

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

二、动态路由匹配：

 
 Hello App! 
  
  Go to Foo 
  Go to Bar

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

// 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 的中 { path: '', component: UserHome}, // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的中 { path:'profile', component:UserProfile }, // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的中 { path: 'posts', component: UserPosts } ] } ] }); //3. 创建和挂载根实例 const app = new Vue({ router:router }).$mount('#app');

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

Named Routes

Current route name: {{ $route.name }}

home
foo
bar

This is Home

This is Foo

This is Bar {{ $route.params.id }}

大橙子网站建设，新征程启航

vue.js中Vue-router2.0基础的示例分析-创新互联

Hello App!

Hello App!

Hello App!

User:{{ $route.params.id }}

Hello App!

User:{{ $route.params.id }}

Named Routes

其他资讯