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

html

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

 
 





 Hello App!
 

  
  
  
  Go to Foo
  Go to Bar
 
 
 
 

实现效果

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

案例：2

path的二级链接固定参数

 Data Fetching
 

 
/
 
/users (exact match)

 

实现效果

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

如何解决这个问题呢

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

 Data Fetching
 

 
/
 
111
 

 

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

 Named Views
 

  
/
  
/other
 
 
 
 

总结

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