vue之路由(跳转、多级路由、守卫)、localStorage

合集 - vue(11)
1.js循环、v-model、事件处理、表单控制2.vue 模版语法、指令、nodejs3.Vue之后端交互、计算、监听、组件间通信4.Vue动态组件、插槽、vue项目5.Vue执行和开发流程、登录小案例、混入、插件、elementui
6.vue之路由(跳转、多级路由、守卫)、localStorage
7.Vue38.路飞学城 之 基础配置9.python 安装pip3、虚拟环境、pip3下载离线包10.路飞学城之多方式登录、短信验证码、课程11.python之redis 缓存
收起

一、vue-router使用

1、vue-router的使用

创建项目时候已经安装路由

不需要： npm install vue-router --save

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
    
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
   })
    
   //暴露router
   export default router

2、路由跳转

标签跳转：<router-link，

控制页面跳转：$router.push

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1 html 中通过标签跳转
    <router-link :to="about_url">
      <button>点我调到about-->标签的跳转</button>
    </router-link>
     
     <router-link to="/about">
          <button>点我调到about-->标签的跳转</button>
      </router-link>
 
# 2 js 控制页面跳转
      // 方式一：直接放地址形式
      // this.$router.push('/about')
      // 方式二：对象形式
      // this.$router.push({name: 'about'})
      // this.$router.push({path: '/about'})

3、相关api

?
1
2
3
4
5
6
7
8
9
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
 
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
 
this.$router.back(): 请求(返回)上一个记录路由
 
this.$router.go(-1): 请求(返回)上一个记录路由
 
this.$router.go(1): 请求下一个记录路由　

4、页面跳转，携带数据

注意：

以 login?user_id=9&age=18携带参数，需要从 $route.query 中取

以/xx/:id/:name 携带参数，需要从 $route.params中取

方式一：url地址中携带 ? 

http://localhost:8081/login?user_id=9&age=18

?
1
2
3
4
5
6
7
8
9
10
11
跳转的时候：
        -标签跳转：
            <router-link to="/userinfo?user_id=9">
            <router-link :to="{name:userinfo,query:{user_id:88}}">
         
        -js跳转
            this.$router.push("/userinfo?user_id=9")
            this.$router.push({name:'userinfo',query:{user_id:88}})
             
取值的时候：
      this.$route.query.user_id                   

方式二：/xx/:id/:name

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
配置路由：
        {
        path: '/userinfo/:id/:name',
        name: 'userinfo',
        component: UserDetail
     },
 
跳转的时候：
        -标签跳转：
            <router-link to="/userinfo/88/lqz">
            <router-link :to="{name:'userinfo',params:{id:88,name:lqz}}">
        -js跳转
        this.$router.push("/userinfo/88/lqz")
            this.$router.push({name:userinfo,params:{id:88,name:lqz}})
             
取值的时候：
        this.$route.params.id 

代码：

5、多级路由(子路由)

children: []

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 1 新建一个首页HomeView，一个IndexView和OrderView
    -构建出骨架，以后想点击只有这个位置变，就放一个 <router-view/>
     
    -IndexView和OrderView正常写
     
# 2 定义多级路由
     {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [ //通过children配置子级路由
            {
                path: 'index', //此处一定不要写：/news
                component: IndexView
            },
            {
                path: 'order',//此处一定不要写：/message
                component: OrderView
            }
        ]
    },
     
# 3 路由跳转：js，html　　

跳转：

?
1
2
3
4
5
6
<router-link to="/order">
                <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">订单</span>
                </el-menu-item>
</router-link>

需动态改变的地方：

?
1
2
3
4
5
<el-col :span="20">
           <div class="right">
             <router-view/>
           </div>
         </el-col>　

vue代码：

6、路由守卫 

作用：对路由进行权限控制

全局守卫（全局路由文件）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('name')==='lqz'){
            next()
        }else{
            alert('名不对，无权限查看！')
        }
    }else{
        next()
    }
})
 
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || 'lqz系统'
})
 
export default router

独享守卫（某个页面的路由）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
 
//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                    beforeEnter: (to, from, next) => {
                        console.log('独享路由守卫',to,from)
                        if(to.meta.isAuth){ //判断是否需要鉴权
                            if(localStorage.getItem('name')==='lqz'){
                                next()
                            }else{
                                alert('名不对，无权限查看！')
                            }
                        }else{
                            next()
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
 
                        }
                    ]
                }
            ]
        }
    ]
})
 
export default router　　

注意：meta: { isAuth: false } 是在路由里面定义好的

组件内守卫（组件内）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//进入守卫：通过路由规则，进入该组件时被调用
 beforeRouteEnter (to, from, next) {
 },
 //离开守卫：通过路由规则，离开该组件时被调用
 beforeRouteLeave (to, from, next) {
 }
 
 
  //通过路由规则，进入该组件时被调用
      beforeRouteEnter (to, from, next) {
          console.log('About--beforeRouteEnter',to,from)
          if(to.meta.isAuth){ //判断是否需要鉴权
              if(localStorage.getItem('school')==='atguigu'){
                  next()
              }else{
                  alert('学校名不对，无权限查看！')
              }
          }else{
              next()
          }
      },
 
      //通过路由规则，离开该组件时被调用
      beforeRouteLeave (to, from, next) {
          console.log('About--beforeRouteLeave',to,from)
          next()
      } 

7、路由器的两种工作模式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
 
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
 
3 hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。
 
4 history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

二、localStorage系列

1、前端存储数据，可以存在哪？

# localStorage
# sessionStorage
# cookie

?
1
2
3
4
5
6
7
- 可以放到cookie中，cookie有过期时间，一旦过期就清理了
 
- 可以当到localStorage，永久存储，除非使用代码删除，清理浏览器
  
- 可以存到sessionStorage，关闭浏览器就没了
     
# 用户登录状态----》token串--->cookie中

2、LocalStorage的存、读、删

一下都是定义点击事件来模拟

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
saveLocalStorage() {
  // 保存对象呢？
  var userinfo = {'name': 'lqz', 'age': 19}
  localStorage.setItem('userinfo', JSON.stringify(userinfo))
},
 
getLocalStorage() {
  var res = JSON.parse(localStorage.getItem('userinfo'))
  console.log(res)
},
 
deleteLocalStorage() {
  localStorage.clear()
  localStorage.removeItem('username')
}

3、session的存、读、删

?
1
2
3
4
5
6
7
8
9
10
11
12
13
savesessionStorage() {
  // 保存对象呢？
  var userinfo = {'name': 'lqz', 'age': 19}
  sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getsessionStorage() {
  var res = JSON.parse(sessionStorage.getItem('userinfo'))
  console.log(res)
},
deletesessionStorage() {
  sessionStorage.clear()
  sessionStorage.removeItem('username')
},

4、cookie --->js操作---》借助于第三方操作cookie

安装vue-cookies

?
1
npm install vue-cookies -S

在main.js引入

?
1
2
3
import VueCookies from "vue-cookies";
 
Vue.use(VueCookies);

cookie的存、读、删

?
1
2
3
4
5
6
7
8
9
10
savecookie() {
  // 保存对象呢？
  this.$cookies.set('name', 'lqz')
},
getcookie() {
  console.log(this.$cookies.get('name'))
},
deletecookie() {
  this.$cookies.remove('name')
},

三、vue3介绍

1、tree-shaking、typeScript 

?
1
2
3
4
# tree-shaking是一种消除死代码的性能优化理论
# TypeScript
    -javascript:坑---》填坑---》弱类型
    -typeScript：强类型语言

2、组合式api和配置项api

配置项 Options API（vue2）

比较分散

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

组合式Composition API（vue3）

集中在setup中

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return {
      count,
      increment
    };
  }
};
</script>

　　

 

posted @   凡人半睁眼  阅读(66)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue执行和开发流程、登录小案例、混入、插件、elementui
·  Vue之后端交互、计算、监听、组件间通信
·  Vue-router的使用、路由守卫、localStorage
·  vue-router使用,localStorage系列,vue3介绍,组合式api和配置项api
·  vue-day07
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
· Manus的开源复刻OpenManus初探

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示