vue-路由

最新推荐文章于 2024-06-08 11:39:51 发布

毛默默不吃鱼

最新推荐文章于 2024-06-08 11:39:51 发布

阅读量112

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40869401/article/details/109171558

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

ref

获取页面中的元素
```

this.$refs.myp
```

获取子组件实例

<son ref="myson"></son>
this.$refs.myson => son组件实例对象
this.$refs.myson.msg

获取v-for生成的多个元素

<p ref="myp"  v-for="(item, index) in arr" :key="index"></p>
this.$refs.myp => [p,p,p]

jquery swiper zepto

用法

直接在index.html 里引入
npm
- 下载
- 如果用的组件单一，那就在该组件内
```
import $ from 'jquery'
```
- 如果多个组件想用，放到全局引入，找到main.js
```
import $ from 'jquery'
Vue.prototype.$ = $
```

插槽

小霸王

就是组件给你预留一个位置，将来调用的时候可以在这个位置放自定义的东西

匿名插槽

// 子组件
<slot></slot>
// 父组件
<son>
	<p></p>
</son>

具名插槽

<slot name="A"></slot>
<slot name="B"></slot>

<son>
	<div slot="A"></div>
	<div slot="B"></div>
</son>

作用域插槽

由父组件决定子组件的结构内容，但是数据由子组件决定

// 父组件
<Chacaoson>
<!-- 2.6.x之前的写法 -->
// slot-scope 的值就是插槽对象
  <template slot-scope="data">
  	<p v-for="(item, index) in data.list" :key="index">{{item}}</p>
  </template>
</Chacaoson>

// 子组件
:list="list" 在插槽对象上加一个属性叫list，值是一个list数组
<slot :list="list">
	<ul>
  <li v-for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</slot>

is属性

is是一个属性，给html标签的一个属性

<div :is="abc"></div>
<abc></abc>
### 后端路由

本质：用户访问的url地址 和 服务器资源的对应关系

### web网页的制作的发展历程

+ 后端渲染（性能问题）

+ ajax 前端局部刷新和渲染，浏览器的前进和后退按钮失效

+ spa 单页面应用，整个网站只有一个页面，实现原理之一是通过对hash值得监听来进行页面的局部刷新（hash的变化不会发起新的http请求）问题: 首次加载可能慢

  ```html
  <a href="#login">登录</a>
      <a href="#register">注册</a>
      <div></div>
      <script>
          window.onhashchange = function() {
              console.log(location.hash)
              if (location.hash == "#login") {
                  document.querySelector("div").innerHTML = "登录"
              } else if (location.hash == "#register") {
                  document.querySelector("div").innerHTML = "注册"
              }
          }
      </script>

前端路由

本质：用户访问的浏览器地址和页面的对应关系

基本使用

Vue 和 Vue.js

Vue-router: Vue Router 是 Vue.js 官方的路由管理器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span.router-link-active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link是vue-router提供的一个组件，用来进行路由跳转 -->
        <!-- 有一个必须的属性to，声明跳转到哪个路由 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register" tag="span">注册</router-link>
        <!-- 4. router-view 是vue-router提供的一个组件，用来盛放最终匹配的组件 -->
        <router-view></router-view>
    </div>
    <!-- 1. 引入vue 和 vue-router，注意先引vue -->
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>

        var Login = Vue.component("Login", {
            template: `<h1>登录组件</h1>`
        })
        var Register = Vue.component("Register", {
            template: `<h1>注册组件</h1>`
        })

        // 2. 生成一个路由实例
        let router = new VueRouter({
            // 路由表
            routes: [
                // 对象是路径和组件的匹配规则
                {
                    path: "/login",
                    component: Login
                },
                {
                    path: "./register",
                    component: Register
                }
            ]
        })
        const vm = new Vue({
            el: "#app",
            // 将router实例挂载到vm实例的身上
            router: router
        })



        
    </script>
</body>
</html>

编程式导航

用js去进行页面的跳转和其他操作

$router

浏览器历史记录栈
this.$router.push("/home") 可以后退到上一级页面
this.$router.push({path: "/home"})
{
	path: "/home",
	name: "home",
	component: Home
}
this.$router.push({name: "home"})
this.$router.replace("/home") 不可以后退到上一级页面


this.$router.back()  浏览器的后退按钮功能
this.$router.forward() 浏览器的前进按钮功能
this.$router.go(n)  n如果为正数，则代表前进n个页面，n如果为负数，则代表后退n个页面

路由传参

查询字符串

// 传
this.$router.push("/home?id=1&uname=zhangsan")
this.$router.push({path: "/home", query: {
  id: 1,
  uname: "zhangsan"
}})
this.$router.push({name: "home", query: {
  id: 1,
  uname: "zhangsan"
}})
// 接
this.$route.query.id

动态路由

// 改路由表
{
	path: "/home/:uname"
}
// 传
this.$router.push("/home/zhangsan")
this.$router.push({
  name: "home",
  params: {
    id:1
  }
})
// 接
this.$route.params.uname

路由守卫

全局路由守卫

// 全局路由守卫
// 在进入每一个路由之前回执行这里的回调
router.beforeEach((to, from, next) => {
	// to 将要访问的路由对象
	// from 将要离开的路由对象
	console.log(to)
	// 将要对购物车路由进行拦截，判断当前是否是登录状态
	if (to.meta.isCheck) {
		// 判断登录状态
		if (!localStorage.getItem("name")) {
			setTimeout(() => {
				next("/my/login")
			}, 1000)
		} else {
			next()
		}
	} else {
		next()
	}
})

路由内守卫

{
			path: "/cart",
			component: Cart,
			meta: {
				isCheck: true
			},
			// 在进入cart路由之前触发
			beforeEnter(to, from ,next) {
				if (!localStorage.getItem("name")) {
					next("/my/login")
				} else {
					next()
				}
			}
		},

组件内守卫

beforeRouteEnter(to, from ,next) {}
beforeRouteUpdate(to, from ,next) {}
beforeRouteLeave(to, from ,next) {}

毛默默不吃鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-路由

ref获取页面中的元素this.$refs.myp获取子组件实例<son ref="myson"></son>this.$refs.myson => son组件实例对象this.$refs.myson.msg获取v-for生成的多个元素this
复制链接

扫一扫

专栏目录