平武建站

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 
 
 
  
       

User:{{ $route.params.id }},Post:{{$route.params.post_id}}

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

三、嵌套路由：

 
 
Hello App!
 
 
 
  Go to Foo 
  Go to profile 
  Go to posts 
 
 
  
       
    

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

       
         

主页

         

概况

         

登录信息

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

四、编程式路由：

 
 
Hello App!
 
 
 
  Go to Foo 
 
 
  
       

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

         

注册

  
// 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 }}
 

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

六、命名视图：

 
 Go to Foo 
  
  
  
 
 
 
 
This is Foo
 
 
 
 
 
This is Bar {{ $route.params.id }}
 
 
 
 
 
This is baz
 

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

以上是“vue.js中Vue-router 2.0基础的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文名称：vue.js中Vue-router2.0基础的示例分析-创新互联
网页链接：http://pwwzsj.com/article/egojc.html

其他资讯