发表于: 2020-07-02 19:47:50

1 2189


今日完成:

简单地了解后端渲染=>前端渲染=>单页面富应用

描述路由在单页面富应用的作用:

浏览器向静态资源服务器发送请求,就一次性把所有的html+css+js全部请求(下载)下来,
但是不是一次性全部渲染和执行
浏览器上(前端路由)会生成一个url,但是不会向浏览器发送请求,它会通过一些js代码判断,
从请求的全部资源中把需要的资源抽取出来,显示(前端路由,用来映射浏览器上这种url和全部资源里面到底要渲染那一个组件)
在这里抽取的资源,在vue里就是一个个的组件
前端管理的这一套映射关系,叫做前端路由
前端路由的核心是什么呢?
改变URL,但是页面不进行整体的刷新

写登录页

在components中创建.vue组件

<template>

<form class="main">

...

</template>

<script>

...

</script>

<style scoped lang="less">

...

</style>


配置路由映射(关系):组件和路径映射关系

import task5 from '../components/task5'//从上一层目录导入

{
path: '/',
redirect: 'task5'//redirect重定向
},

{

//一个映射关系就是一个映射对象,一个映射关系有需要配置path和component,映射关系

//表示路径里面只要出现/task5,就会显示conponent对应的组件,这里是用path而不是url,因为/task5它是不是完整的url

path: '/task5',
component: task5//需要import导入
},

App.vue

<template>
<div id="app">
<router-link to="/task5" tag="div"></router-link>
<router-view/>
</div>

</template>

<router-link to="/task5" tag="div">点击</router-link>


报错,显示空白

添加文字,添加tag,始终报错点击属性不能为空


返回列表 返回列表
评论

    分享到