<!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. Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals)

    题目链接:http://codeforces.com/contest/828 A. Restaurant Tables time limit per test 1 second memory limi ...

  2. 计算机中丢失OPENGL.dll

    开发OpenGL项目时,在VS开发环境下可能会出现如图所示的错误. 在c:\windows\system32和SysWow64文件夹下存在opengl32.dll,此时,所写程序能够正常编译,但是,程 ...

  3. Ubuntu 17.4下如何安装和配置flash player

    Ubuntu Linux系统下没有自带的flash player,要自己手动安装.下面post出简单的安装过程. 首先打开终端,输入命令:sudo apt-get install flashplugi ...

  4. 作业：xml练习1

    作业:使用xml描述下表中的学生成绩信息,XML文件存为scores.xml. 1.打开eclipse软件. 2.file-new-java project,输入project name:201811 ...

  5. java 创建 HMAC 签名

    ava 创建 HMAC 签名 psd素材 1. []ComputopTest.java package com.javaonly.hmac.test; import java.io.IOExcepti ...

  6. C语言中数据类型和变量

    C语言中的数据类型 数据类型的本质,固定大小内存块的别名. 数组名代表数组首元素的地址. 数组首元素的地址,&代表整个数组的地址. 数组数据类型,怎么定义数据数组类型,定义数组类型指针,数组类 ...

  7. 1070 Bash 游戏 V4

    传送门 1070 Bash游戏 V4   基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次拿的数量最少1个,最多 ...

  8. [hdu2544]最短路spfa

    解题关键:最短路模板一直没整理过,这里整理了一下spfa+链式前向星建图的最短路模板,以后网络赛省的打了. spfa算法的关键就是松弛操作,只有进行松弛操作,其后的点距离才可能被更新. #includ ...

  9. 《精通Spring4.X企业应用开发实战》读后感第五章（注入参数详解）

  10. Python学习——使用dict和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...