网络编程
位置:首页>> 网络编程>> JavaScript>> 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

作者:安树  发布时间:2024-05-21 10:31:02 

标签:vue,cli,router

windows下vue-cli及webpack 构建网站(一)环境安装

 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

windows下vue-cli及webpack 构建网站(三)使用组件 

1、本篇文章是建立在以上三篇文章的基础上的。

2、安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令:


cnpm install vue-router --save-dev

详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

3、在src文件夹下面新建一个文件夹page用于存放模板文件,然后分别在这个文件夹下面新建 index.vue、list.vue两个文件,然后打开index.vue粘贴以下代码:


<template>

<div class="jumbotron">
   <h1>这里是首页!</h1>
</div>

</template>

保存之后再打开list.vue粘贴以下代码:


<template>

<div class="list-group">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item active">
   这里是列表页
  </a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Morbi leo risus</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Vestibulum at eros</a>
 </div>

</template>

来源:http://blog.csdn.net/ansu2009/article/details/53321044

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com