四川盐亭网站制作公司

vue-router的使用方法及含参数的配置方法

html

创新互联-专业网站定制、快速模板网站建设、高性价比花都网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式花都网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖花都地区。费用合理售后完善，十多年实体公司更值得信赖。

router-link：跳转链接

参数to：就是跳转到的链接位置

二层链接 eg：

/users/evan

需要配置所对应的对应的children

children所对应的参数

path：可分我固定的参数url 和带参数的  区别于 ：（冒号）

name：对应的参数的模块名称（动态传参数）

component:可以传多个组件

eg：
{ path: '/',
 // a single route can define multiple named components
 // which will be rendered into s with corresponding names.
 components: {
  default: Foo,
  a: Bar,
  b: Baz
 }
},

:to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}"

参数说明params 对应的是children的path的值 ，to中的name为vueRouter中的name

当要传多个参数时

{ path: ':username/:aaa', name: 'user', component: User }

也可以利用query传值

query: { foo: 'bar' }
eg: path: ':username'

redirect：链接直接指向指定的方向（重定向）

beforeEnter：
·
{ path: '/dashboard', component: Dashboard, beforeEnter: requireAuth },
function requireAuth (route, redirect, next) {
 if (!auth.loggedIn()) {
 redirect({
  path: '/login',
  query: { redirect: route.fullPath }
 })
 } else {
 next()
 }
}

使用props将组件和路由解耦：

在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。

对应的参数的值的获取

{{$route.params.username1 }}
 { path: '/users', component: Users,
  children: [
  { path: ':username', name: 'user', component: User }
  ]
 }

eg:

 
    
  
  • /
    • 
  
  • / (exact match)
    • 

  
  • /users
    • 
  
  • /users (exact match)
    • 

  
  • /users/evan
    • 
  
  • /users/evan#foo
    • 
  
  • 
   
   /users/evan?foo=bar
   
  
    • 
  
  • 
   
   /users/evan?foo=bar (named view + exact match)
   
  
    • 
  
  • 
   
   /users/evan?foo=bar&baz=qux
   
  
    • 

  
  • /about
    • 

  
   /about (active class on outer element)
  
  
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
 { path: '/', component: Home },
 { path: '/about', component: About },
 { path: '/users', component: Users,
  children: [
  { path: ':username', name: 'user', component: User }
  ]
 }
 ]
})

js:vue-router配置

router-view：组件的放置位置

对应的链接所对应的组件的配置

路由底下的子组件

{ path: '/users', component: Users,
  children: [
  { path: ':username', name: 'user', component: User }
  ]
 }

//组件

Vue.use(VueRouter)

const Home = { template: '
Home
' }
const About = { template: '
About
' }

const Users = {
 template: `
 

  
Users

  
 

 `
}

const User = { template: '
{{ $route.params.username }}
' }

==================分界线====================

案例：1




 
 Title






 
Hello App!

 

  
  
  
  Go to Foo
  Go to Bar

实现效果

vue-router的使用方法及含参数的配置方法

=====================================

案例：2

path的二级链接固定参数


 
Data Fetching

 
    
 
  • /
    • 
 
  • /users (exact match)
    •

实现效果

vue-router的使用方法及含参数的配置方法 

注意与上一个实例进行对比发现链接的地址并没有发生改变，刷新后会返回首页

如何解决这个问题呢

==============案例=======================


 
Data Fetching

 
    
 
  • /
    • 
 
  • 111
 
    •

vue-router的使用方法及含参数的配置方法

====================案例传多个组件==============================





 
Named Views

 
    
  
  • /
    • 
  
  • /other
    •

vue-router的使用方法及含参数的配置方法

总结

以上所述是小编给大家介绍的vue-router的使用方法及含参数的配置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


本文题目：vue-router的使用方法及含参数的配置方法
文章位置：http://scyanting.com/article/pcspce.html

其他资讯