浅谈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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery 插件学习(一)
Aug 06 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
javascript的理解及经典案例分析
May 20 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
js实现右键弹出自定义菜单
Sep 08 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
JavaScript事件列表解说
2006/12/22 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
红头文件任命书范本
2014/06/05 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
python中取整数的几种方法
2021/11/07 Python