【12.0】Vue之Router的使用

【一】Router的介绍

Router是一种用于实现页面组件跳转的工具。
- 在单页面应用中，为了实现页面之间的切换，可以使用Router来进行管理和控制。
提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转

【二】Router之简单使用

【1】页面跳转

首先需要编写页面组件；
在路由配置文件（如router/index.js）的routes数组中添加一个路由。

【2】组件中实现页面跳转

方式一：使用 router-link 标签

可以通过使用router-link标签来实现页面跳转
- 其中to属性可以是一个地址字符串，也可以是一个对象。
- to:可以是地址，也可以是对象(标签指令:to)
  - <router-link :to="tag_url">
<router-link to="/about"></router-link>

方式二:js控制

在组件的javascript代码中使用this.$router.push()来控制路由跳转
- this.$router.push('/about')

【3】路由跳转时，可以使用对象

（1）通过对象跳转路由name形式

可以通过传递对象参数的方式来指定跳转到已经在路由中注册过的name
<router-link :to="{name:'about'}">

（2）通过对象跳转路由path形式

除了使用name，在to属性中也可以直接指定跳转到的路径
<router-link :to="{path:'/about'}">

（3）对象中可以有query属性

跳转时，对象中还可以传递query属性，该属性是一个对象类型，会将其中的key-value对拼接到跳转路径后面
console.log(this.$route.query)
<router-link to="/about?name=dream&age=19">

（4）在另一个页面中取出地址栏中数据

console.log(this.$route.query);

（6）使用带参数的路径

在路由配置中，可以定义带参数的路径，通过在路由配置的path中使用:来定义参数名称。
```
{
	path: '/detail/:pk',
	name: 'detail',
	component: DetailView
},
```
在路由访问时，可以通过this.$route.params.pk来获取路径中的参数。
- this.$route.params.pk

（7）路由跳转时使用带参数的路径

在进行路由跳转时，也可以使用上述带参数的路径形式
this.$router.push({name: 'detail', params: {pk: 999}})
<router-link :to="{name:'detail',params:{pk:88}}">

（补充）注意区分`$route`和`$router`

this.$route是Vue.js中的一个内置对象，代表当前路由的相关信息。
- 它包含了当前页面的路径、参数、查询字符串等信息。
- 通过this.$route可以获取当前路由对象的各种属性
- 例如path表示当前路径，params表示传递的参数，query表示查询字符串等。
this.$router是Vue.js中用来进行路由导航的对象。
- 它是通过new VueRouter()创建的实例，代表整个路由对象。
- 通过this.$router可以进行页面跳转、切换路由等操作。
- 它提供了一些方法如push()、replace()、go()等，这些方法可以用于在代码中进行页面跳转或路由切换。
this.$route是当前路由对象，用于获取当前页面的路由信息，
this.$router是整个路由对象，用于进行页面跳转和路由管理。

（补充）关于this.$router的一些方法

this.$router.push(path)
- 相当于点击路由链接，可以返回到当前路由界面；
this.$router.replace(path)
- 用新路由替换当前路由，不可以返回到当前路由界面；
this.$router.back()
- 请求（返回）上一个记录的路由；
this.$router.go(-1)
- 请求（返回）上一个记录的路由；
this.$router.go(1)
- 请求下一个记录的路由

【三】Router之多级路由

【1】新建一个页面组件（DreamView），配置路由

{
path: '/dream',
name: 'dream',
component: DreamView,
},

【2】在页面中，想再显示页面组件，实现点击切换的效果

<h1>dream页面</h1>
<router-link to="dream01">
    <button>dream-01</button>
</router-link>
<router-link to="dream02">
    <button>dream-02</button>
</router-link>

<router-view>
    # 以后这里变换页面组件，多级路由
</router-view>

【3】新建两个页面组件，Dream01.vue，Dream02.vue，配置路由children

{
    path: '/dream',
        name: 'dream',
            component: DreamView,
                children: [ //通过children配置子级路由
                    {
                        path: 'dream01', //此处一定不要写：/news
                        component: Dream01
                    },
                    {
                        path: 'dream02',//此处一定不要写：/message
                        component: Dream02
                    }
                ]
},

【案例】

多级路由是指在一个父级路由下有多个子级路由的情况。
- 这样可以让我们更好地组织和管理应用程序的路由。
下面是一个例子来详解Vue中的多级路由：
- 假设我们有一个电子商务网站，主页面包括商品展示和购物车两个模块。
  - 其中，商品展示页面下有多个分类，每个分类又有多个商品。我们希望在URL中通过路由参数动态切换不同分类和商品。

（1）首先，在Vue实例中创建一个Vue Router实例，并定义路由规则：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Product from '../views/Product.vue'

Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/category/:categoryId',
    name: 'category',
    component: Category,
    children: [
      {
        path: 'product/:productId',
        name: 'product',
        component: Product
      }
    ]
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

（2）接下来，我们需要在父组件中设置路由出口，以及导航到子级路由：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/category/electronics">Electronics</router-link>
    <router-link to="/category/books">Books</router-link>
  </div>
</template>

<!-- Category.vue -->
<template>
  <div>
    <h2>{{ $route.params.categoryId }}</h2>
    <router-view></router-view>
  </div>
</template>

<!-- Product.vue -->
<template>
  <div>
    <h3>{{ $route.params.productId }}</h3>
    <!-- 商品相关内容 -->
  </div>
</template>

在上述代码中，父组件Home.vue中通过<router-link>标签定义了两个路由链接到不同的分类页面。
- 而子组件Category.vue使用了动态路由参数$route.params来获取并显示当前的分类ID，并通过<router-view>标签渲染子级路由Product.vue。

（3）最后，我们需要在根组件上添加`<router-view>`标签将路由组件进行渲染：

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

这样，当我们点击分类链接时，Vue Router会根据URL的路径匹配路由规则，并将对应的组件渲染到<router-view>标签中。
- URL的路径可以包含动态参数，这样我们就可以根据参数的变化加载不同的子级路由组件。

【四】Router之路由守卫

【介绍】

在Vue Router中，路由守卫是一种机制，用于在导航发生前、发生时和发生后执行一些操作。
- 通过使用路由守卫，我们可以控制路由的访问权限、实现登录验证、处理异步请求等操作。
Vue Router提供了三种类型的路由守卫：
- 全局守卫、路由独享守卫和组件内守卫。

【案例】

假设我们有一个需要进行登录验证的应用程序，只有在用户已登录的情况下才能访问某些页面。
- 我们希望在用户访问受保护的页面之前进行登录验证，并在登录成功后才允许访问。

（1）首先，在Vue Router实例中定义路由规则，并添加路由守卫：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 定义需要登录验证的页面
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否需要登录验证
  if (to.meta.requiresAuth) {
    // 判断用户是否已登录，这里假设通过判断localStorage中的登录状态来确定
    const isAuthenticated = localStorage.getItem('isAuthenticated')
    if (!isAuthenticated) {
      // 如果未登录，则跳转到登录页面
      next('/login')
    } else {
      // 已登录，允许访问
      next()
    }
  } else {
    next()
  }
})

export default router

上述代码中，我们在路由规则中的"/dashboard"路径下定义了一个元字段meta: { requiresAuth: true }来标识该页面需要登录验证。
- 然后，在全局前置守卫beforeEach中对每个路由进行拦截和验证。
在全局前置守卫中，我们首先判断将要访问的路由是否需要登录验证。
- 如果需要验证，则判断用户是否已登录，这里假设通过判断localStorage中的登录状态来确定。
- 如果用户未登录，则跳转到登录页面；如果用户已登录，则允许访问。

（2）接下来，在登录成功后，我们可以将登录状态存储到localStorage中，并使用`router.push()`方法跳转到受保护的页面：

// Login.vue
methods: {
  login() {
    // 登录验证逻辑
    // ...

    // 登录成功，将登录状态存储到localStorage中
    localStorage.setItem('isAuthenticated', true)

    // 跳转到受保护的页面
    this.$router.push('/dashboard')
  }
}

这样，当用户访问受保护的页面时，Vue Router会先执行全局前置守卫，进行登录验证。
- 只有在登录成功后才允许访问。

【五】Router之路由的两种工作模式

路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器

hash模式

地址中永远带着#号，不美观

若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

兼容性较好。

history模式

地址干净，美观

兼容性和hash模式相比略差

应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue中的路由器有两种工作模式：
- hash模式和history模式。

【1】Hash模式：

对于一个URL来说，hash值是指URL中#号及其后面的内容。
- 例如，URL为http://example.com/#/home
- 那么#/home就是hash值。
Hash模式的特点是
- URL中永远带着#号，不会包含在HTTP请求中发送给服务器。
优点：
- 兼容性较好，支持在不同浏览器和平台上正常运行。
缺点：
- URL不够美观
- 如果通过第三方手机APP分享地址，有些严格的APP可能会将带有#号的URL标记为不合法。

【2】History模式：

History模式通过利用HTML5的history API
- 在不刷新页面的情况下改变URL，使得URL更加干净、美观。
History模式的特点是
- URL中不再带有#号，可以直接访问类似于传统URL的路径。
优点：
- 地址干净、美观，与传统URL一样，更符合用户的习惯。
缺点：
- 相对于Hash模式，兼容性较差。
- 特别是在部署上线时，需要服务器的支持来解决刷新页面后可能出现的服务端404错误问题。

【3】示例演示Vue Router中的两种工作模式的切换

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  // 使用hash模式
  // mode: 'hash',

  // 使用history模式
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上述代码中
- 我们可以根据需要注释掉其中一种模式，分别测试hash模式和history模式。
如果使用hash模式
- 可以将mode的值设为'hash'
- 例如：mode: 'hash'。
如果使用history模式
- 可以将mode的值设为'history'
- 例如：mode: 'history'。
在实际开发中，只需根据具体需求选择一种模式即可
- 如果要使用history模式，还需要确保在部署应用程序时服务器进行相应的配置。

【补充】localstorage和sessionstorage,和cookie

前端存储数据
- 登录成功，有token，存本地
  - 京东...
- 不登陆加购物车
  - 迪卡侬官网
前端可以存数据的位置
- localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
- sessionstorage：只在当前会话生效，关闭浏览器，就没了
- cookie：有过期时间，到了过期时间，自动删除

<template>
<div class="home">
    <h1>操作localstorage,永久存储</h1>
    <button @click="addLocalstorage">增加</button>
    <button @click="getLocalstorage">查</button>
    <button @click="deleteLocalstorage">删除</button>
    <h1>操作sessiostorage,当前会话，关闭浏览器</h1>
    <button @click="addSessiostorage">增加</button>
    <button @click="getSessiostorage">查</button>
    <button @click="deleteSessiostorage">删除</button>


    <h1>操作cookie,有过期时间</h1>
    <button @click="addCookie">增加</button>
    <button @click="getCookie">查</button>
    <button @click="deleteCookie">删除</button>

    </div>
</template>

<script>

    export default {
        name: 'HomeView',
        methods: {
            addLocalstorage() {
                var userinfo = {name: 'dream', age: 19}
                localStorage.setItem('userinfo', JSON.stringify(userinfo))

            },
            getLocalstorage() {
                var userinfo = localStorage.getItem('userinfo')
                console.log(JSON.parse(userinfo).name)

            },
            deleteLocalstorage() {
                localStorage.clear()
                localStorage.removeItem('userinfo')

            },
            addSessiostorage() {
                var userinfo = {name: '彭于晏', age: 19}
                sessionStorage.setItem('userinfo', JSON.stringify(userinfo))

            },
            getSessiostorage() {
                var userinfo = sessionStorage.getItem('userinfo')
                console.log(JSON.parse(userinfo).name)

            },
            deleteSessiostorage() {
                sessionStorage.clear()
                sessionStorage.removeItem('userinfo')

            },
            addCookie() {
                // 需要借助于第三方  vue-cookies
                // cnpm install -S vue-cookies
                this.$cookies.set('name', '刘亦菲', '300s')

            },
            getCookie() {
                console.log(this.$cookies.get('name'))

            },
            deleteCookie() {
                this.$cookies.remove('name')

            },
        }


    }
</script>

【1】localStorage:

localStorage用于在浏览器中永久保存数据，除非手动删除或清除浏览器缓存。
- 即使关闭浏览器再次打开，数据仍然可以被访问到。
在登录成功后
- 如果有token需要持久保存，可以将token存储在localStorage中。
localStorage提供了setItem(key, value)和getItem(key)等方法来设置和获取数据。
示例代码如下：

// 存储token到localStorage
localStorage.setItem('token', 'your_token_here');

// 从localStorage中获取token
const token = localStorage.getItem('token');

【2】sessionStorage:

sessionStorage用于在当前会话中临时保存数据，一旦会话结束（浏览器窗口关闭），数据就会被清除。
当用户未登录但需要加入购物车时，可以使用sessionStorage来存储相关数据。
sessionStorage的使用方式与localStorage类似，示例代码如下：

// 存储购物车商品ID到sessionStorage
sessionStorage.setItem('cartItemId', 'your_item_id_here');

// 从sessionStorage中获取购物车商品ID
const cartItemId = sessionStorage.getItem('cartItemId');

【3】cookie:

cookie是存储在用户浏览器上的小型文本文件，它具有过期时间。
- 当过期时间到达时，cookie会被自动删除。
可以使用cookie来实现一些需要在多个页面之间共享的数据。
通过document.cookie属性可以设置和获取cookie值。
示例代码如下：

// 存储一个带过期时间的cookie
document.cookie = 'token=your_token_here; expires=Thu, 1 Jan 2024 12:00:00 UTC; path=/';
  
// 获取cookie
const cookieValue = document.cookie;

【4】小结

需要注意的是，安全性方面，为了避免敏感信息泄露，不建议将用户的敏感数据直接存储在localStorage、sessionStorage或cookie中。
- 在实际开发中，对于敏感信息，最好使用安全的传输方式（例如HTTPS）进行传输，并在服务器端进行相应的验证和存储。
另外
- 对于cookie，还需要注意设置合适的域名和路径，以确保cookie的正确读取和写入。
- 同时，需要注意防止跨站脚本攻击(XSS)和跨站请求伪造攻击(CSRF)，对cookie进行适当的安全处理。

posted @ 2023-08-07 08:25 Chimengmeng 阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【12.0】Vue之Router的使用

【一】Router的介绍

【二】Router之简单使用

【1】页面跳转

【2】组件中实现页面跳转

方式一：使用 router-link 标签

方式二:js控制

【3】路由跳转时，可以使用对象

（1）通过对象跳转路由name形式

（2）通过对象跳转路由path形式

（3）对象中可以有query属性

（4）在另一个页面中取出地址栏中数据

（6）使用带参数的路径

（7）路由跳转时使用带参数的路径

（补充）注意区分$route和$router

（补充）关于this.$router的一些方法

【三】Router之多级路由

【1】新建一个页面组件（DreamView），配置路由

【2】在页面中，想再显示页面组件，实现点击切换的效果

【3】新建两个页面组件，Dream01.vue，Dream02.vue，配置路由children

【案例】

（1）首先，在Vue实例中创建一个Vue Router实例，并定义路由规则：

（2）接下来，我们需要在父组件中设置路由出口，以及导航到子级路由：

（3）最后，我们需要在根组件上添加<router-view>标签将路由组件进行渲染：

【四】Router之路由守卫

【介绍】

【案例】

（1）首先，在Vue Router实例中定义路由规则，并添加路由守卫：

（2）接下来，在登录成功后，我们可以将登录状态存储到localStorage中，并使用router.push()方法跳转到受保护的页面：

【五】Router之路由的两种工作模式

【1】Hash模式：

【2】History模式：

【3】示例演示Vue Router中的两种工作模式的切换

【补充】localstorage和sessionstorage,和cookie

【1】localStorage:

【2】sessionStorage:

【3】cookie:

【4】小结

公告

（补充）注意区分`$route`和`$router`

（3）最后，我们需要在根组件上添加`<router-view>`标签将路由组件进行渲染：

（2）接下来，在登录成功后，我们可以将登录状态存储到localStorage中，并使用`router.push()`方法跳转到受保护的页面：