关于路由的说明

程序员阿酷

已于 2024-03-11 10:39:48 修改

阅读量63

点赞数

分类专栏：三阶段转载笔记文章标签： java

于 2021-09-28 23:16:26 首次发布

原文链接：https://blog.csdn.net/qq_16804847/article/details/119344081

版权

三阶段转载笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CGB2105-Day10

闪耀太阳 2021-08-03 10:51:10

2912

分类专栏： 2105

本文链接： https://blog.csdn.net/qq_16804847/article/details/119344081

版权

2105 专栏收录该内容

17 篇文章 26 订阅

订阅专栏

1. 关于路由说明

1.1 路由嵌套规则

说明: 采用children属性实现路由嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义路由 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 路由占位符<span class="token class-name">A</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 定义模版标签 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"userTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>定义用户组件<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"dogTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>定义宠物组件<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 准备<span class="token number">2</span>个组件  <span class="token operator">--</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/samo"</span><span class="token operator">&gt;</span>萨摩耶<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/bite"</span><span class="token operator">&gt;</span>比特犬<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 定义路由占位符<span class="token class-name">B</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"samoTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>白色的狗狗<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"biteTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>一只凶猛的狗<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue-router.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
			
			let userCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#userTem"</span>
			<span class="token punctuation">}</span>
			
			let dogCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#dogTem"</span>
			<span class="token punctuation">}</span>
			
			let samoCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#samoTem"</span>
			<span class="token punctuation">}</span>
			
			let biteCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#biteTem"</span>
			<span class="token punctuation">}</span>
			
			
			
			<span class="token comment">/* 路由展现问题说明:
				 如果需要进行路由的嵌套 需要采用children 
				 子级的路由会在当前的路由占位符中进行展现
			 */</span>
			<span class="token comment">//定义路由对象</span>
			let router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				routes<span class="token operator">:</span> <span class="token punctuation">[</span>
					<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/user"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> userCom<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/dog"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> dogCom<span class="token punctuation">,</span> children<span class="token operator">:</span><span class="token punctuation">[</span>
						<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/samo"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> samoCom<span class="token punctuation">}</span><span class="token punctuation">,</span>
						<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/bite"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> biteCom<span class="token punctuation">}</span>
					<span class="token punctuation">]</span><span class="token punctuation">}</span>
				<span class="token punctuation">]</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			
			<span class="token comment">//需要vue对象 进行挂载</span>
			<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
				<span class="token comment">//vue对象挂载路由</span>
				router<span class="token operator">:</span> router
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

实现父子关系的嵌套结构:
在这里插入图片描述

2. 京淘项目搭建

2.1 京淘项目后台搭建

2.1.1 创建项目

在这里插入图片描述

2.1.2 导入pom.xml文件

 <!--1.parent标签  2.依赖信息  3.build插件-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/>
    </parent>
<span class="token generics"><span class="token punctuation">&lt;</span>properties<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>java<span class="token punctuation">.</span>version<span class="token punctuation">&gt;</span></span><span class="token number">1.8</span><span class="token operator">&lt;</span><span class="token operator">/</span>java<span class="token punctuation">.</span>version<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>跳过测试类打包<span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>skipTests<span class="token punctuation">&gt;</span></span><span class="token boolean">true</span><span class="token operator">&lt;</span><span class="token operator">/</span>skipTests<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>properties<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>原则<span class="token operator">:</span> 按需导入  <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token generics"><span class="token punctuation">&lt;</span>dependencies<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>springboot启动项<span class="token punctuation">(</span>器<span class="token punctuation">)</span>在包的内部<span class="token class-name">SpringBoot</span>
        已经完成了项目的<span class="token string">"整合"</span><span class="token punctuation">(</span>配置<span class="token punctuation">)</span> 用户拿来就用
        web导入<span class="token class-name">SpringMVC</span>
        <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>web<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>test<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>scope<span class="token punctuation">&gt;</span></span>test<span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>支持热部署 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>devtools<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>添加lombok依赖<span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>projectlombok<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>lombok<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>引入数据库驱动 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>mysql<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>mysql<span class="token operator">-</span>connector<span class="token operator">-</span>java<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>scope<span class="token punctuation">&gt;</span></span>runtime<span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>springBoot数据库连接  <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>jdbc<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>导入MP包之后<span class="token punctuation">,</span>删除原有的<span class="token class-name">Mybatis</span>的包 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>com<span class="token punctuation">.</span>baomidou<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>mybatis<span class="token operator">-</span>plus<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>version<span class="token punctuation">&gt;</span></span><span class="token number">3.4</span><span class="token number">.3</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>dependencies<span class="token operator">&gt;</span>

<span class="token generics"><span class="token punctuation">&lt;</span>build<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>plugins<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>plugin<span class="token punctuation">&gt;</span></span>
            <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
            <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>maven<span class="token operator">-</span>plugin<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
            <span class="token generics"><span class="token punctuation">&lt;</span>version<span class="token punctuation">&gt;</span></span><span class="token number">2.5</span><span class="token number">.2</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>plugin<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>plugins<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>build<span class="token operator">&gt;</span>

2.1.3 后台代码结构

说明: 根据码云中的代码结构完成项目构建
在这里插入图片描述

2.1.4 代码测试

在这里插入图片描述

2.1.5 后台启动项配置

1.选择 edit config…
在这里插入图片描述

在这里插入图片描述

2.2 京淘前端搭建

2.2.1 node.js安装

脚手架安装教程

安装成功之后效果:
在这里插入图片描述

2.2.2 安装VUE 客户端程序

npm是node 安装软件/环境的工具.
配置淘宝镜像: 1).npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE客户端: 命令: npm install -g @vue/cli --force
安装成功后的效果:
在这里插入图片描述

2.2.3 导入前端项目

1). 找到前端项目文件
在这里插入图片描述
2).导入前端项目

3. 编辑路径编辑成功之后,导入项目即可

4.项目运行
引入项目之后,启动服务.

5. 终止程序.

2.3 手动安装脚手架

2.3.1 注意事项

如果通过鼠标点击DOS命令窗口, 则DOS命令窗口可能出于锁定的状态. 通过ctrl+c的形式 解除锁定
报错说明: 只剩一个报错信息
1.则关闭客户端重启.
2.重新导入src文件
3.如果上述的操作还不能解决
3.1 直接导入我的项目 jtadmin
3.2 将上述的操作重复执行
在这里插入图片描述

关闭校验: 将原来的true 改为false
在这里插入图片描述

2.4 关于脚手架框架说明

2.4.1 打开项目

说明由于脚手架其中需要编辑HTML/CSS/JS 所以需要利用Hbuilder进行打开.
1).查看项目位置
在这里插入图片描述
2. 利用hubilder软件打开.即可

2.4.2 什么是脚手架

原来写前端代码时需要自己手动维护html/css/js. 并且如果文件如果很多缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端开发了一个脚手架项目结构.

2.4.3 脚手架结构分析

代码结构

2.4.4 正确理解.vue文件

知识复习:
1. 组件 HTML/CSS/JS 这些都可以封装到组件中.
2. ** 重点:在脚手架中 xxx.vue 代表一个组件 **
在这里插入图片描述

2.4.5 理解main.js

总结: main.js作用
1.导入整个项目中所用到的js.
2.实例化VUE对象
3.通过实例化的VUE对象渲染程序.

2.4.5.1. 引入组件/插件/JS

//import表示导入规则  导入vue.js  并且命名为Vue
import Vue from 'vue'
import App from './App.vue'
//导入路由.js
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'

/* 导入富文本编辑器对应的样式 */
import ‘quill/dist/quill.core.css’ // import styles
import ‘quill/dist/quill.snow.css’ // for snow theme
import ‘quill/dist/quill.bubble.css’ // for bubble theme

2.4.5.2 环境设定

/* 导入axios js */
import axios from 'axios'
/* 设定axios的请求根目录 设定服务器请求网址 */
axios.defaults.baseURL = 'http://localhost:8091/'
/*方便其他JS调用Axios,则将变量定义为全局变量
	Vue.prototype:定义全局变量 命名为: $http
*/
Vue.prototype.$http = axios

Vue.config.productionTip = false

2.4.5.3 初始化VUE对象

传统的VUE对象的创建方式

		//需要vue对象 进行挂载
		const app = new Vue({
			//通过el 指定VUE对象渲染元素的区域.
			el: "#app",
			//vue对象挂载路由
			//router: router
			//如果key=value 则使用key代替
			router
		})

 
 
 
 1
2
3
4
5
6
7
8
9

脚手架中的写法:

1.引入 组件
import App from './App.vue'
2.定义默认DIV
<template>
  <div id="app">
      <!-- 添加路由占位符-->
      <router-view></router-view>
  </div>
</template>

//3. 找到指定的xxx.vue文件, 找到指定的DIV进行渲染.
new Vue({
//引入路由的机制
router,
render: h => h(App)
}).$mount(‘#app’)

2.4.6 关于脚手架路由规范

路由占位符位置
说明: 根据用户路由地址之后在该区域展现组件信息.
路由规则
引入规范: import router from ‘./router’
路由策略

2.4.7 脚手架加载流程

在这里插入图片描述

2.4.8 脚手架使用入门案例

需求: 要求用户访问"/elementUI" 访问 ElementUI的组件.

2.4.8.1 定义ElementUI组件

在这里插入图片描述

2.4.8.2 定义路由机制

在这里插入图片描述

2.4.8.3 访问组件

地址: http://8080/#/elemetUI 路由的拦截的地址!!!
在这里插入图片描述

3.总结

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。前端脚手架运行的一个平台
类比: java程序 -----tomcat服务器.
脚手架前端框架类似于: java中的 spring框架
VUE.JS 类似于: java代码
vue-cli 构建脚手架的一个客户端工具 以视图的方式直观的给用户展现.
类比: SqlYog!!!

4. 作业:

预习ElementUI 网址: https://element.eleme.cn/#/zh-CN

5 晚自习串讲

5.1 路由导航守卫问题

说明: 目前的课程不需要路由导航守卫应该将路由中的 index.js 删除路由导航守卫(权限!!!)
在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import ElementUI from '../components/ElementUI.vue'
//使用路由机制
Vue.use(VueRouter)
const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/elementUI', component: ElementUI}
]