浅谈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几种形式的树结构菜单
May 10 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
jQuery实现元素的插入
Feb 27 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
Python中random模块用法实例分析
2015/05/19 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
学生自我评语
2015/01/04 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
贫困证明怎么写
2015/06/16 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL