VUE基础

最新推荐文章于 2024-10-15 17:30:28 发布

ZRichV

最新推荐文章于 2024-10-15 17:30:28 发布

阅读量438

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_33756294/article/details/105452954

版权

本文详细介绍了Vue-router的基本使用，包括嵌套路由、动态路由匹配、命名路由和编程式导航。同时，深入探讨了Vue前端工程化，包括模块化规范、webpack的基本使用和配置，以及vue单文件组件。此外，还讲解了VUE项目初始化的步骤和Element-UI的基础应用。

摘要由CSDN通过智能技术生成

VUE

Vue-router

基本使用步骤

引入相关的库文件

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 --> 
<script src="./lib/vue_2.5.22.js"></script>
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 -->
<script src="./lib/vue-router_3.0.2.js"></script>

添加路由链接

<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 --> 
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 --> 
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

添加路由填充位

<!-- 路由填充位(也叫做路由占位符) -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>

定义路由组件

var User = {
   
template: '<div>User</div>'
}
var Register = {
   
   template: '<div>Register</div>'
}

配置路由规则并创建路由实例

// 创建路由实例对象
var router = new VueRouter({
   
// routes 是路由规则数组 routes: [
// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性: // path 表示当前路由规则匹配的 hash 地址
// component 表示当前路由规则对应要展示的组件
{
   path:'/user',component: User},
{
   path:'/register',component: Register} ]
})

把路由挂载到 Vue 根实例中

new Vue({
   
el: '#app',
// 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上
router 
});

嵌套路由

父路由组件模板

父级路由链接
父组件路由填充位

<p>
<router-link to="/user">User</router-link> <router-link to="/register">Register</router-link>
</p> 
<div>
<!-- 控制组件的显示位置 -->
<router-view></router-view>
</div>

子级路由模板

子级路由链接
子级路由填充位

const Register = { 
template: `<div>
<h1>Register 组件</h1>
<hr/>
<router-link to="/register/tab1">Tab1</router-link> 
<router-link to="/register/tab2">Tab2</router-link>
<!-- 子路由填充位置 -->