Vue 单文件组件 (SFC) 规范

模板亏丛

脚本

样式

简介

.vue 文件是一个 自定义的文件类型 ，用类 HTML 语法描肆亏述一个 Vue 组件。

每个 .vue 文件包含三种类型的顶级语言块 <template>、<script>和 <style>，还允销雹樱许添加可选的 自定义块 。

路由就是根据网址的不同，返回不同的内容给用户。

入口文件main.js挂载了app这个挂载点，同销做敏时引入App组件和路由。

App.vue组件中使用<router-view>写入了路由，<router-view>使得每个页面显示的是根据路由设置当前地址所对应的内容。

以下为router目录下的index.js文件，文件写明了访问某个路径时显示哪个组件以及组件名是什么。这些组件都需要在文件头的部分进行引入。

在写每个组件的.vue文件的过程中，要在逻辑部分注明它的name，这与router/index.js中申明的组件name保持一致。

在需要实现点击跳转胡空的元素区域使用<router-link :to=" ">to表示跳转到哪个页面，""内的内容按路由文件index.js配置的内容来确定格式。

下图绑定的是动态路由，:to=的内容由两部分组成。用+连接。

注：把<router-link>加到我们需要实现页面跳转的标签外时，会把标签内一些字体颜色改变。这是因为<router-link>默认是个<a>标签。我们可以直接用<router-link>包裹标签，再重新设定字体的颜色，但是其实有更好的方法。如图：把<li>标签直接改为<router-link>，然后在<router-link>内加入tag="li"，这样就可以解决字体颜色变化的问题了。

除了使用上述两种方法，还可以使用router的实例方法亏枝实现页面跳转。“ ”中写法与router/index.js中定义的形式保持一致。

用在函数中方式如下：

---