浅谈vue-router 路由传参的方法


Posted in Javascript onDecember 27, 2017

路由传参数。在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页。

1.新闻列表页模板

<template id="news">
    <div>
      <h2>新闻列表</h2>
      <ul>
        <li>
          <router-link to="/news/001">新闻001</router-link>
        </li>
        <li>
          <router-link to="/news/002">新闻002</router-link>
        </li>
      </ul>      
    </div>
  </template>

我们访问/news/001,跳转到新闻详细页,展示001的这条新闻。

2.新闻详细页组件准备

<template id="NewsDetail">
    <div>
      新闻详细页面
      <span>{{$route.params.id}}</span>
    </div>
  </template>

$route.params.id获取路由上的参数

3.定义路由,增加一个路由

{ path: '/news/:id', component: NewsDetail },

4.全部代码如下:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body> 
  <div id="box">
    <p>
      <router-link to="/home">home</router-link>
      <router-link to="/news">news</router-link>
    </p>
     <router-view></router-view>
  </div>

  <!-- 模板抽离出来 -->
  <template id="home">
    <!-- 注意:组件只能有一个根元素,所以我们包装到这个div中 -->
    <div>
      <h2>首页</h2>
       <router-link to="/home/login">登录</router-link>
      <router-link to="/home/reg">注册</router-link>
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </template>

  <template id="news">
    <div>
      <h2>新闻列表</h2>
      <ul>
        <li>
          <router-link to="/news/001">新闻001</router-link>
        </li>
        <li>
          <router-link to="/news/002">新闻002</router-link>
        </li>
      </ul>      
    </div>
  </template>

  <template id="login">
    <div>登录界面</div>
  </template>
  <template id="reg">
    <div>注册界面</div>
  </template>

  <template id="NewsDetail">
    <div>
      新闻详细页面
      <span>{{$route.params.id}}</span>
    </div>
  </template>

  <script type="text/javascript">
    // 1. 定义(路由)组件。
    const Home = { template: '#home' };
    const News = { template: '#news' };

    const Login = { template: '#login' };
    const Reg = { template: '#reg' };

    //新闻详细页组件
    const NewsDetail = { template: '#NewsDetail' };


    // 2. 定义路由
    const routes = [
       { path: '/', redirect: '/home' },
      { 
        path: '/home', 
        component: Home, 
        children:[
          { path: '/home/login', component: Login},
          { path: '/home/reg', component: Reg}
        ]
      },
      { path: '/news', component: News,},
      { path: '/news/:id', component: NewsDetail },

    ]

    // 3. 创建 router 实例,然后传 `routes` 配置
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })


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

    // 现在,应用已经启动了!
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 #Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 #Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 #Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 #Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 #Javascript
VSCode 配置React Native开发环境的方法
Dec 27 #Javascript
VSCode配置react开发环境的步骤
Dec 27 #Javascript
You might like
php实现加减法验证码代码
2014/02/14 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python实现杨氏矩阵查找
2019/03/02 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
基于python操作ES实例详解
2019/11/16 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python新手如何理解循环加载模块
2020/05/29 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
项目合作计划书
2014/01/09 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
交通事故被告答辩状
2015/05/22 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
vue实现滑动解锁功能
2022/03/03 Vue.js