vue（七）

最新推荐文章于 2024-07-19 14:16:29 发布

RxxQingYi

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量85

点赞数

分类专栏： vue 文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/qq_52245126/article/details/120874503

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

动态组件和缓存组件

动态组件：在页面某个地方，对不同的组件之间进行动态切换

标签属性：component标签的is属性语法：is后跟组件的变量名决定使用哪个组件来渲染

<component is="Sinabox"></component>//这里is是组件名
<component :is="mycomponent"></component>//这里:is是data中的变量中保存的组件名

<srcipt>
    data(){
		return{
			mycomponent:"Sinabox"	
    	}
    }
	components:{
		Sinabox,
    }
</srcipt>

缓存组件：动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue都创建了一个新的组件对象。

keep-alive可以缓存动态切换的组件

<keep-alive>
	<component is="Sinabox"></component>//这里is是组件名
	<component :is="mycomponent"></component>//这里:is是data中的变量中保存的组件名
</keep-alive>

<srcipt>
    data(){
		return{
			mycomponent:"Sinabox"	
    	}
    }
	components:{
		Sinabox,
    }
</srcipt>

异步加载并缓存

异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载

//通过webpack2.0按需加载
//局部写法
new Vue({
    components:{
        'Sinabox':function(resolve){
			requrie(['./Sinabox.vue'],re)
        }
    }
})
//全局写法
Vue.component('Sinabox',function(resolve){
     //require 语法告诉 webpack自动将编译后的代码分割成不同的块
     //这些块将通过 Ajax 请求自动下载
	require(['./Sinabox'],resolve)
     //注册全局组件名，但只有一个名字，没有实体，相当于空的
	//当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法
	//然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。
})

//通过webpack2+es2015返回一个promis（这是主流方式）
//局部写法
new VUe({
	components:{
		Sinabox:()=> import('./Sinabox.vue')//采用这种模式进行导入
	}
})
//全局写法
Vue.component('Sinabox',
             ()=>import('./Sinabox.vue')//这个‘import’函数会返回一个'promise'对象
             )


//高级异步组件
components:{
	"Sinabox":()=> ({
        // 需要加载的组件 (应该是一个 `Promise` 对象)
        component: import('./Box4.vue'),
        // 异步组件加载时使用的组件
        loading: LoadingComponent,
        // 加载失败时使用的组件
        error: ErrorComponent,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了，
        // 则使用加载失败时使用的组件。默认值是：`Infinity`
        timeout: 3000
	})
}

路由

相关认识
- 后端路由;对于前段的网络请求，不同的pathname，去执行后端的不同业务
- 前端路由：不同的网址对应各自的页面
- vue的前端路由：SPA应用要做出路由效果，就得判断当前网址，然后切换组件
- vue-router就是专门做切换组件的功能，它是一个单独的技术，依赖vue

引入

cdn方式

npm下载引入

npm i vue-router --save-dev//注意:这种下载不好,因为打包之后容易出问题
npm i vue-router --save或者 npm i vue-router --S

配置

 在main.js入口文件中引入
 import Vue from "vue"
 import VueRouter from "vue-router"//引入路由工具
 import App from "./App.vue"
 Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
 
 //创建路由工具
 const router=new VueRouter({
	 //routes路由器 生成很多网址对应的切换组件
	 routes:[{path:"/home",component:()=>import("./home.vue")},
             {path:"/about",component:()=>import("./about.vue")}]
 })
 new Vue({
	 router,//把路由挂载到页面
	 render(h){return h(App)}
 }).$mount("#app")
 
//在App.vue中写 <router-view></router-view>

通过vue脚手架创建包含路由的vue环境

//使用该方法的前提是已经全局安装脚手架

//第一步：创建vue项目----在项目路径处打开cmd命令符窗口输入
vue creata app//此处的app为项目名称
//执行命令后，选择
Manually select features
//进入配置选项界面，该界面通过空格键来判断是否选中，其中（）内带有*符号的表示已经选中
//选择router选项，其他选项根据业务需要来决定是否选择
//然后其他步骤都选择默认选择

router-view和routrer-link标签

router-view：相当于路由网址匹配到的组件会渲染到当前组件的这个标签上
router-link：相当于a标签，给我们提供跳转到某个路由的功能，如果没有匹配到路由就会跳转失败
- <router-link to="/xx"></router-link>
- 编程式跳转：this.$router.push({oath:‘路由’})

动态路由&传参

路由传参有两种方式

传递的参数在路由信息对象中；路由对应的组件中获取this.$router

query传参

//两种传参：
<router-link to="/xx?name=karen&pwd=123">go</router-link>

this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})

//在路由匹配的组件中获取数据
mounted(){let queryObj=this.$router.query}

动态路由传参

//设计：
const router = new VueRouter({
    routes:[
        {path:"/home/:id",component:()=> import("./home.vue")},
        {path:"/about",component:()=> import("./about.vue")}
    ]
})

//两种传参：
<router-link to="/home/123">go</router-link>
this.$router.push({path:"/home",params:{id:123}})

//在路由匹配的组件中获取数据：
mounted(){let paramsObj = this.$route.params}

路由嵌套

*代表所有匹配都通过
redirect代表重定向

注意：子路由中的匹配弟子不要在前面加/ 否则就会认为是跟路由

//语法:一个路由对象的设计中中包含: path(路由匹配的路径)  component(匹配路径时对应渲染的组件)  redirect(匹配路径时重新匹配另外的路径)  children(子路由们的数组)   name(路由的名字,方便直接通过名字来匹配路由):
//routes=[{path,component,redirect,children,name},{path,component,redirect,children,name}]

const routes = [{
	path: '/',
	component: () => import("../views/root.vue"),
    redirect:"/goods_rank",// 访问/时默认重新访问/goods_rank
	children: [{
            name:"goods_rank",
			path: "goods_rank",
			component: () => import("../views/root/goods_rank.vue"),
  //goods_rank组件加载的条件是路由匹配上了: localhost:8080/goods_rank
			children: [{
                    name:"goods_rank_all",
					path: "goods_rank_all",
					component: () => import("../views/root/goods_rank/goods_rank_all.vue")
  //goods_rank_all组件加载的条件是路由匹配上了: localhost:8080/goods_rank/goods_rank_all
				},
				{
					path: "goods_rank_highpraise",
                    name:"goods_rank_highpraise",
					component: () => import("../views/root/goods_rank/goods_rank_highpraise.vue")
				},
				{
					path: "goods_rank_middlepraise",
                    name:"goods_rank_middlepraise",
					component: () => import("../views/root/goods_rank/goods_rank_middlepraise.vue")
				},
				{
					path: "goods_rank_badepraise",
                    name:"goods_rank_badepraise",
					component: () => import("../views/root/goods_rank/goods_rank_badepraise.vue")
				},
				{
					path: "*",
					component: () => import("../views/root/goods_rank/goods_rank_all.vue")
				}
			]

		},
		{
			path: "goods_inventory",
            name:"goods_inventory",
			component: () => import("../views/root/goods_inventory.vue")
		},
		{
			path: "goods_new",
            name:"goods_new",
			component: () => import("../views/root/goods_new.vue")
		},
		{
			path: "goods_set",
            name:"goods_set",
			component: () => import("../views/root/goods_set.vue")
		}
	]
}]

组件中跳转时：

//4种语法:
//1
<router-link to="/当前代码所在组件的路由地址/去哪一个子路由的地址">go</router-link>

this.$router.push({path:"/当前代码所在组件的路由地址/去哪一个子路由的地址"})

//2
<router-link to="去哪一个子路由的地址">go</router-link>

this.$router.push({path:"去哪一个子路由的地址"})


//注意:前面的/要写上,代表绝对路由,不写的话代表相对于当前路由,而不是当前父组件路由
//3
<router-link :to="{name:'注册的路由的name'}">go</router-link>

this.$router.push({name:'注册的路由的name'})


例:
<router-link to="/goods_rank/goods_rank_highpraise">go</router-link>
this.$router.push({path:"/goods_rank/goods_rank_highpraise"})

<router-link :to="{name:'goods_rank_highpraise'}">go</router-link>
this.$router.push({name:'goods_rank_highpraise'})


补充:
//replace跟push很像，但不会向 history 添加新记录，而是替换当前的history记录
this.$router.replace({path:"/home"})

this.$router.go(1)// 在浏览器记录中前进一步，等同于 history.forward()
 
this.$router.go(-1)// 后退一步记录，等同于 history.back()
 
this.$router.go(3)// 前进 3 步记录
 
this.$router.go(-100)// 如果 history 记录不够用，那就默默地失败呗

跳转总结
- 注册路由时，路由路径不要在前面加 “/”
- 跳转路由时
  - path里写的路径必须前面加斜杠从跟路由路径开始写
  - 不用path 直接使用name

路由模式—hash&history

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取
- 特点：hash虽然在URL中，但不被包括咋HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
- hash模式下，仅hash符号之前的内容被包含在请求中，如http://www.xxx.com，因为对于后端你来说，即使没有做到对路由的全覆盖，也不会返回404错误
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
- history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
```
const router=new VueRouter({
     mode:"hash",//"history"
	 routes:[{path:"/home",component:()=>import("./home.vue")},
	         {path:"/about",component:()=>import("./about.vue")}]
 })
```

VueRouter router route区别

VueRouter 是一个nodejs识别的模块包
route是路由匹配时，携带了一些信息的对象，包括path，params,hash,query等等信息
router是路由实例对象，包含了路由跳转方法，钩子函数等等

补充一些修饰符

v-model.trim：去掉前后的空格
v-model.lazy：将底层input事件变为change事件，光标失焦和内容改变才会使data的数据改变。
v-model.number：当输入的数据为纯数字时，将输入的数据转为数字类型。（默认是String）

RxxQingYi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue（七）

动态组件和缓存组件动态组件：在页面某个地方，对不同的组件之间进行动态切换标签属性：component标签的is属性语法：is后跟组件的变量名决定使用哪个组件来渲染<component is="Sinabox"></component>//这里is是组件名<component :is="mycomponent"></component>//这里:is是data中的变量中保存的组件名<srcipt> data(){ re
复制链接

扫一扫