浅谈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读取ASP设定的COOKIE
Nov 24 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
vue 查看dist文件里的结构(多种方式)
Jan 17 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 str_pad 函数使用详解
2009/01/13 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python线程、进程和协程详解
2016/07/19 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python入门_条件控制(详解)
2017/05/16 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
解析Python的缩进规则的使用
2019/01/16 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
django queryset相加和筛选教程
2020/05/18 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
上海微创软件面试题
2012/06/14 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
行政管理毕业生自荐信
2014/02/24 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
党员个人承诺书
2015/04/27 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
Java异常体系非正常停止和分类
2022/06/14 Java/Android