浅谈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 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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 进程锁定问题分析研究
2009/11/24 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php远程下载类分享
2016/04/13 PHP
php中关于换行的实例写法
2019/09/26 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
浅谈python中set使用
2016/06/30 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
违纪检讨书2000字
2014/02/08 职场文书
捐助倡议书范文
2014/04/15 职场文书
保护水资源的标语
2014/06/17 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js