浅谈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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
Vue声明式渲染详解
May 17 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
关于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实现二维数组中的查找算法小结
2018/06/09 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python实现各进制转换的总结大全
2017/06/18 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
python 命名规范知识点汇总
2020/02/14 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
证券期货行业个人的自我评价
2013/12/26 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
结婚喜宴主持词
2014/03/14 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
MySQL 视图(View)原理解析
2021/05/19 MySQL
Log4j.properties配置及其使用
2021/08/02 Java/Android
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers