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


Posted in Javascript onNovember 13, 2018

html

router-link:跳转链接

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

二层链接 eg:

<router-link to="/users/evan">/users/evan</router-link>

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

children所对应的参数

path:可分我固定的参数url 和带参数的  区别于 :(冒号)

name:对应的参数的模块名称(动态传参数)

component:可以传多个组件

eg:
{ path: '/',
 // a single route can define multiple named components
 // which will be rendered into <router-view>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:

<ul>
  <li><router-link to="/">/</router-link></li>
  <li><router-link to="/" exact>/ (exact match)</router-link></li>

  <li><router-link to="/users">/users</router-link></li>
  <li><router-link to="/users" exact>/users (exact match)</router-link></li>

  <li><router-link to="/users/evan">/users/evan</router-link></li>
  <li><router-link to="/users/evan#foo">/users/evan#foo</router-link></li>
  <li>
   <router-link :to="{ path: '/users/evan', query: { foo: 'bar' }}">
   /users/evan?foo=bar
   </router-link>
  </li>
  <li><!-- #635 -->
   <router-link :to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}" exact>
   /users/evan?foo=bar (named view + exact match)
   </router-link>
  </li>
  <li>
   <router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}">
   /users/evan?foo=bar&baz=qux
   </router-link>
  </li>

  <li><router-link to="/about">/about</router-link></li>

  <router-link tag="li" to="/about">
   <a>/about (active class on outer element)</a>
  </router-link>
  </ul>
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: '<div><h2>Home</h2></div>' }
const About = { template: '<div><h2>About</h2></div>' }

const Users = {
 template: `
 <div>
  <h2>Users</h2>
  <router-view></router-view>
 </div>
 `
}

const User = { template: '<div>{{ $route.params.username }}</div>' }

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

案例:1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<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>
<script>
 var Foo = { template: '<div>foo</div>' }
 var Home= { template:'<div>Home</div>' }
 var Bar = { template: '<div>bar</div>' }

 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器,
 // 或者,只是一个组件配置对象。
 // 我们晚点再讨论嵌套路由。
 var routes = [
  { path: '/', component: Home},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
 ]

 // 3. 创建 router 实例,然后传 `routes` 配置
 // 你还可以传别的配置参数, 不过先这么简单着吧。
 var router = new VueRouter({
  routes // (缩写)相当于 routes: routes
 })

 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由,
 // 从而让整个应用都有路由功能
 var app = new Vue({
  router,
  el:'#app'
 })
</script>
</body>
</html>

实现效果

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

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

案例:2

path的二级链接固定参数

<div id="app">
 <h1>Data Fetching</h1>
 <ul>
 <li><router-link to="/">/</router-link></li>
 <li><router-link to="/user/even" exact>/users (exact match)</router-link></li>
</ul>
 <router-view class="view"></router-view>
</div>
<script>
 var Users = {
  template: '<div><h2>Users</h2><router-view></router-view> </div>'
 }
 var User = {
  template: '<div>{{$route.params.username1 }}</div>'
 }
 var Home = {
  template: '<div>Home</div>'
 }
 var router = new VueRouter({
  routes: [
   { path: '/', component: Home,},
   // 动态路径参数 以冒号开头
   { path: '/user', component: Users,
    children: [
     { path: ':username1', name: 'bbb', component: User }
    ]}
  ]
 })
 new Vue({
  el:"#app",
  router,
  data:{
   name:111
  }
 })

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

二级链接动态参数

<div id="app">
 <h1>Data Fetching</h1>
 <ul>
 <li><router-link to="/">/</router-link></li>
 <li><router-link :to="{ name: 'bbb', params: { username: name}}" exact>/users/evan?foo=bar (named view + exact match)
  </router-link>
 </li>
</ul>
 <router-view class="view"></router-view>
</div>
<script>
 var Users = {
  template: '<div><h2>Users</h2><router-view></router-view> </div>'
 }
 var User = {
  template: '<div>{{$route.params.username }}</div>'
 }
 var Home = {
  template: '<div>Home</div>'
 }
 var router = new VueRouter({
  routes: [
   { path: '/', component: Home,},
   // 动态路径参数 以冒号开头
   { path: '/user', component: Users,
    children: [
     { path: ':username', name: 'bbb', component: User }
    ]}
  ]
 })
 new Vue({
  el:"#app",
  router,
  data:{
   name:111
  }
 })
</script>

实现效果

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

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

如何解决这个问题呢

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

<div id="app">
 <h1>Data Fetching</h1>
 <ul>
 <li><router-link to="/">/</router-link></li>
 <li><router-link :to='{name:"user", params:{ id:111 }}'>111</router-link>
 </li>
</ul>
 <router-view class="view"></router-view>
</div>
<script>
 var Users = {
  template: '<div><h2>Users</h2><div>{{$route.params.id}}</div></div>'
 }
 var Home = {
  template: '<div>Home</div>'
 }
 var router = new VueRouter({
  routes: [
   { path: '/', component: Home,},
   // 动态路径参数 以冒号开头
   { path: '/user/:id', name:'user', component: Users}
  ]
 })
 new Vue({
  el:"#app",
  router,
  data:{
   name:111
  }
 })
</script>

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

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
 <h1>Named Views</h1>
 <ul>
  <li><router-link to="/">/</router-link></li>
  <li><router-link to="/other">/other</router-link></li>
 </ul>
 <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>
<script>

 var Foo = { template: '<div>foo</div>' }
 var Bar = { template: '<div>bar</div>' }
 var Baz = { template: '<div>baz</div>' }

 var router = new VueRouter({
  mode: 'history',
  routes: [
   { path: '/',
    // a single route can define multiple named components
    // which will be rendered into <router-view>s with corresponding names.
    components: {
     default: Foo,
     a: Bar,
     b: Baz
    }
   },
   {
    path: '/other',
    components: {
     default: Baz,
     a: Bar,
     b: Foo
    }
   }
  ]
 })
 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由,
 // 从而让整个应用都有路由功能
 var app = new Vue({
  router,
  el:'#app'
 })
</script>

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

总结

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

Javascript 相关文章推荐
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 #Javascript
Vue实现一个无限加载列表功能
Nov 13 #Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 #Javascript
You might like
PHP 一个页面执行时间类代码
2010/03/05 PHP
php学习笔记之基础知识
2014/11/08 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
理解javascript异步编程
2016/01/27 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
python简单实现插入排序实例代码
2020/12/16 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
党支部承诺书范文
2014/03/28 职场文书
个人自荐材料
2014/05/23 职场文书
廉洁自律证明
2015/06/24 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技