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 new一个对象的实质
Jan 07 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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
关于文本留言本的分页代码
2006/10/09 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php构造函数的继承方法
2015/02/09 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php图片添加水印例子
2016/07/20 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
销售代表求职自荐信
2013/10/01 职场文书
个性大学生自我评价
2013/12/04 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
大学生个人求职信例文
2014/07/07 职场文书
热情服务标语
2014/10/07 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书