一、vue-cli建立SPA项目

1.1 安装vue-cli

1.2 命令构建SPA项目

1.3 导入编码器

1.4 SPA项目运行访问过程

二、SPA项目使用路由

2.1 定义组件

2.2 定义组件与路由的关系

2.3 定义触发事件

2.4 测试

三、嵌套路由

3.1 嵌套路由案例

3.2 实现步骤：

3.3 结论

一、vue-cli建立SPA项目

1.1 安装vue-cli

两个下载指令：

npm install -g vue-cli

npm install webpack -g

第二个指令：

下载好后：

1.2 命令构建SPA项目

我们在一个非中文目录的文件夹中运行cmd，

输入指令：

vue init webpack spa

脚手架构建完成

项目目录：

1.3 导入编码器

接着我们就把我们构建好的项目导入我们的编码器中，Leaf这里用的是前端代码编码器HBuilderX；

然后一定记得要先进入我们的项目，再输入运行指令：npm run dev

运行测试一下我们的项目：

然后我们就会得到一个地址，我们复制下来进行访问；

运行页面：

1.4 SPA项目运行访问过程

到这里我们在一起来看看spa项目的访问过程，它是经过了那些文件；

这个就需要结合大家自己建立的spa项目的文件来进行观看了；

① 首先访问根目录的index.html；

② index.html通过main.js中的vue实例管理（#app边界），同时指定App.vue模板；

③ App.vue中包含了logo图片以及锚点，而锚点与组件的对应关系存在router/index.js中，所以就指向了一个组件；

④ 最终App.vue中就显示了logo图片，以及Helloworld.vue的内容。

二、SPA项目使用路由

2.1 定义组件

我们定义两个组件：在components中

Home组件：

<template><div>这是首页内容，展示最新的10篇博客</div>
</template><script>
export default {name: 'Home',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
<style>
</style>

About组件：

<template><div>这是关于本站显示的内容区域，本站的发展史...</div>
</template><script>
export default {name: 'About',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
<style>
</style>

2.2 定义组件与路由的关系

这个我们需要在router里面的index.js中定义;

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/Home',name: 'Home',component: Home},{path: '/About',name: 'About',component: About}]
})

2.3 定义触发事件

我们在App.vue中定义触发事件：

/* 触发事件 */
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>

2.4 测试

最后让我们来一起测试一下：

三、嵌套路由

3.1 嵌套路由案例

我们以一个案例来看看嵌套路由是如何实现的：

案例：

点击“关于”按钮，会弹一个窗口，

窗口拥有两个按钮、也就是两个触发事件，

并且两个按钮又可以分别弹出不同的内容；

3.2 实现步骤：

① 在“关于”的组件中添加两个触发事件、定义锚点；

② 分别为其定义组件；

③ 定义组件与路由的关系；

触发事件：

<div><!-- 这是关于本站显示的内容区域，本站的发展史... --><!-- 两个触发事件 --><router-link to="/AboutMe">关于站长</router-link><router-link to="/AboutWebSite">关于本站</router-link><!-- 定义锚点 --><router-view></router-view>
</div>

定义组件：

AboutMe：

<template><div>站长Leaf在xxx公司有着N年项目经验，带领数十人完成重大项目的研发...</div>
</template><script>
export default {name: 'AboutMe',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
<style>
</style>

AboutWebSite：

<template><div>网站历史：网站于2003年创建，运作十余年，风风雨雨什么经历都有过...</div>
</template><script>
export default {name: 'AboutWebSite',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
<style>
</style>

定义组件与路由的关系：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebSite from '@/components/AboutWebSite'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/Home',name: 'Home',component: Home},{path: '/About',name: 'About',component: About,children:[{path: '/AboutMe',name: 'AboutMe',component: AboutMe},{path: '/AboutWebSite',name: 'AboutWebSite',component: AboutWebSite}]}]
})

最后我们就可以来测试一把啦：

关于站长：

关于本站：

3.3 结论

嵌套路由的使用主要其实就是在定义路由与组件的关系的时候，添加了children；

OK，测试完毕！！！

搭建SPA项目SPA项目中使用路由嵌套路由相关推荐

react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...
Vue.js项目去除url中的#/ - 解决篇
文章目录 `Vue.js`项目`去除`url中的`#/` 一.解决办法二.前后效果图,对比如下 Vue.js项目去除url中的#/ 使用vue路由,新建项目的url地址总是带有锚点#/,如下url: ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
[Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
3、vue-路由、拦截器和嵌套路由
这里写目录标题一.路由 (1)路由的配置 (2)路由的概念 1.路由的概念 ①参考链接 ②路由的使用第一步-创建组件第二步-配置router.js 第三步-配置main.js 2.路由的生命周期 ...
SPA项目搭建及嵌套路由
目录上期与大家分享了什么是SPA(单页Web应用),今天来给大家分享如何使用vue-cli搭建一个SPA项目. 一.SPA项目搭建 1. 什么是vue-cli? 2.安装vue-cli 3.使用vu ...
vue-cli构建SPA项目结构介绍spa完成路由开发及嵌套路由
目录一.vue-cli构建SPA项目结构介绍二.spa完成路由开发三. 嵌套路由一.vue-cli构建SPA项目结构介绍前提:搭建好NodeJS环境 node -v npm -v ...
spa 搜索引擎_SPA项目开箱即用的SEO解决方案
前言本文章写于 2019-07-05 请注意时效性. 有关 SPA 项目的 SEO 友好的解决方案其实不多, 常见的解决手段如下: 将 SPA 项目改为 SSR 渲染使用预渲染前者非常稳定但是对 ...
SpringMVC,MyBatis项目中兼容Oracle和MySql的解决方案及其项目环境搭建配置、web项目中的单元测试写法、HttpClient调用post请求等案例
要搭建的项目的项目结构如下(使用的框架为:Spring.SpingMVC.MyBatis): 2.pom.xml中的配置如下(注意,本工程分为几个小的子工程,另外两个工程最终是jar包): 其中 ...

搭建SPA项目SPA项目中使用路由嵌套路由

一、vue-cli建立SPA项目

1.1 安装vue-cli

1.2 命令构建SPA项目

1.3 导入编码器

1.4 SPA项目运行访问过程

二、SPA项目使用路由

2.1 定义组件

2.2 定义组件与路由的关系

2.3 定义触发事件

2.4 测试

三、嵌套路由

3.1 嵌套路由案例

3.2 实现步骤：

触发事件：

定义组件：

定义组件与路由的关系：

3.3 结论

搭建SPA项目SPA项目中使用路由嵌套路由相关推荐

最新文章

热门文章