<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

</head>

<body>

    <div id="app">

        <router-link to="/goodslist">商品列表</router-link>

        <router-link to="/newslist">新闻列表</router-link><br/>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

</body>

<script>

    //1.定义好组件

    const newsListComponent = Vue.extend({

        template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>'

    })

    const goodsListComponent = {

        template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>'

    }

    //新闻详情组件

    //拿到路径中的参数，可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

    const newsDetailComponent = {

        template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>'

    }

    //2.创建路由对象，设置路由规则

    const router = new VueRouter({

        routes:[//其中routes很容易写错，建议拷贝

            { path: '/', redirect: '/goodslist' },

            {path:'/goodslist',component:goodsListComponent},

            {path:'/newslist',component:newsListComponent},

            {path:'/newsdetail/:newsId',component:newsDetailComponent}

        ]

    })

    //3. 注入到根实例,从而让整个应用都有路由功能

    const vm = new Vue({

        router

    }).$mount('#app')

</script>

</html>

很好理解吧

一个VUE的小案例的更多相关文章

  1. 跟我一起做一个vue的小项目（二）

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  2. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. 跟我一起做一个vue的小项目（八）

    接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...

  5. 跟我一起做一个vue的小项目（五）

    接下来我们要做的是热门推荐页面,我们写一个推荐组件 使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧 使用了min-width:0 我们来看完整的代 ...

  6. 跟我一起做一个vue的小项目（四）

    接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...

  7. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  8. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  9. 跟我一起做一个vue的小项目（APPvue2.5完结篇）

    先放一下这个完结项目的整体效果 下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页 我们先看效果 在处理详情页向下移动过程中,heade ...

随机推荐

  1. jQuery(expression, [context])

    jQuery(expression, [context])         返回值:jQuery 概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQuery 的 ...

  2. PYTHON 爬虫笔记六:PyQuery库基础用法

    知识点一:PyQuery库详解及其基本使用 初始化 字符串初始化 html = ''' <div> <ul> <li class="item-0"&g ...

  3. python操作cad

    from pyautocad import Autocad # 自動連接上cad,只要cad是開着的,就創建了一個<pyautocad.api.Autocad> 對象.這個對象連接最近打開 ...

  4. 勤于思考：jQuery Validation 在IE7（兼容模式）下出现“找不到成员”的脚本错误

    今天在调试IE10下使用IE6判断脚本出现错误,处理后说IE7也不行,调试后则会出现以下错误: SCRIPT3: 找不到成员. jquery171.js, 行2582 字符4 其实开始我认为是jque ...

  5. T57

    “期待使我产生了介于幸福与恐惧之间的激动”The anticipation produced in me a sensation somewhat between bliss and fear他猛一下 ...

  6. 小程序写tab和swiper切换结合效果

    实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block ...

  7. 机器学习：Selective Search for Object Recognition

    今天介绍 IJCV 2013 年的一篇文章,Selective Search for Object Recognition,这个是后面著名的DL架构 R-CNN 的基础,后续介绍 R-CNN 的时候, ...

  8. highcharts 图例全选按钮方法

    $('#uncheckAll').click(function(){ var chart = $('#container').highcharts(); var series = chart.seri ...

  9. CodeForces - 1005E2：Median on Segments (General Case Edition) （函数的思想）

    You are given an integer sequence a1,a2,…,ana1,a2,…,an. Find the number of pairs of indices (l,r)(l, ...

  10. bzoj 3872 [Poi2014]Ant colony——二分答案

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3872 可以倒推出每个叶子节点可以接受的值域.然后每个叶子二分有多少个区间符合即可. 注意一开 ...