vue篇-修改路由的hash模式、router-link补充、路由的知识点

1.修改路由的hash模式

2.router-link补充

3.通过代码跳转路由

 // this.$router.push('/about')
    this.$router.replace('/about') //没有记录不能回退

4.路由传递参数的方式

第一种动态路由传递参数
1.首先要在router>index.js配置的时候,给path后面添加一个动态属性

  {
    path: '/user/:userId',
    name: 'User',
    component: User
  },

2.点击跳转的时候也要给path后面加上动态的值,to前面加:冒号,userId是在data中定义的

 <router-link :to = '/user/+userId'>用户登录</router-link>
 
data() {
    return {
      userId:'lisi'
    }
  },
 

这样跳转的时候就会显示lisi了

3.如何使用路由url后面的值

//1.在当前组件可以直接使用
<h2>{{$route.params.userId}}</h2>
//2.也可以放在computed里面使用
<h2>{{userId}}</h2>
computed:{
    userId(){
      return this.$route.params.userId
    }
  }

2.使用query传递参数
1.在App.vue里面进行页面跳转并传递参数

<router-link :to="{path:'/about',query:{a:'123',b:'456'}}">跳转到about</router-link>

2.点击跳转

问号后面就是query的内容
3.在about页面取值

<p>{{this.$route.query.a}}</p>
<p>{{this.$route.query.b}}</p>

注意:就算不传值也可以这样写跳转的路径:to="{path:’/about’}"
3.通过代码跳转传递参数

 // this.$router.push('/about')
    this.$router.replace('/about'+this.message) //没有记录不能回退
	this.$router.replace({path:'/about',query:{a:3,b:4}})

5. $router和 $route的区别

$route对象
$route对象表示当前的路由信息,包含了当前URL解析得到的信息。包含当前的路径,参数,query对象等。

    1.    $route.path      字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

    2.    $route.params      一个 key/value 对象，包含了 动态片段 和 全匹配片段，      如果没有路由参数，就是一个空对象。

    3.    $route.query      一个 key/value 对象，表示 URL 查询参数。      例如，对于路径 /foo?user=1，则有$route.query.user == 1，      如果没有查询参数，则是个空对象。

    4.    $route.hash      当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。锚点*

    5.    $route.fullPath      完成解析后的 URL，包含查询参数和hash的完整路径。

    6.    $route.matched      数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

    7.    $route.name    当前路径名字

    8.    $route.meta  路由元信息

$router对象
$route对象是全局路由的实例,是router构造方法的实例。

1、push
    1.字符串this.$router.push('home')

    2. 对象this.$router.push({path:'home'})

    3. 命名的路由this.$router.push({name:'user',params:{userId:123}})

    4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})

    push方法其实和<router-link :to="...">是等同的。

2、go
     页面路由跳转 

     前进或者后退this.$router.go(-1)  // 后退

3、replace
    push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，

    不会向 history 栈添加一个新的记录

6.vue-router路由嵌套的使用

1.首先在components里面创建新的组件 News、Message
2.然后向嵌套在谁下面,就在谁下面用children、比如嵌套在about下面

const News = () => import('../components/News.vue')
const Message = () => import('../components/Message.vue')
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue'),
    children:[
      {
        // 子路由不需要加/
        path:'',
        redirect:'news'
      },
      {
        // 子路由不需要加/
        path:'news',
        component:News
      },
      {
        path:'message',
        component:Message
      }
    ]
  },

3.然后在About页面进行使用

 <router-link to="/about/news">新闻</router-link>
  <router-link to="/about/message">消息</router-link>
    <router-view></router-view>

7.vue-route导航守卫

导航守卫
官网导航守卫

全局导航守卫

beforEach 前置守卫(guard)

使用全局导航守卫跳转到不同页面标题改变
1.首先在route>index.js里面给路由,配置一个属性,如下

 {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      title:'首页'
    }
  },

2.在main.js里面使用beforEach

router.beforEach((to,from,next){
//从from跳转到to
 // to.meta.title这种的话有路由嵌套拿不到数据
  document.title = to.matched[0].meta.title
  next()
})

afterEach 后置守卫

如果是后置钩子,也就是afterEach,不需要主动调用next()函数,在beforEach后调用。

router.afterEach((to,from) => {
  console.log('后置守卫');
})

路由独享守卫

beforEnter

在router>index.js使用,用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用

{
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue'),
    beforeEnter: (to, from, next) => {
     console.log('路由独享');
     next()
    },
   }

组件内守卫

beforeRouteEnter

beforeRouteEnter进入路由前调用,这里组件还未创建,不能使用this

export default {
  data() {
    return {
      message:'66666'
    }
  },
   beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.message);
        })
    }

}

beforeRouteLeave

beforeRouteLeave离开路由前被调用,可以访问里面的this属性

   beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

beforeRouteUpdate

beforeRouteUpdate路由更新前被调用,组件不会重新初始化,可以使用this

beforeEach的使用

点击不同路由网页标题显示不同

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const Login = () => import('../components/login')
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      title:'首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
      title:'about'
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta:{
      title:'登录'
    },
    children:[
      {
        path:'admin1',
        component: () => import('../components/admin1'),
        meta:{
          title:'用户1'
        }
      },
      {
        path:'admin2',
        component: () => import('../components/admin2'),
        meta:{
          title:'用户2'
        }
      }
    ]
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to,from,next) =>{
  console.log(to);
  window.document.title = to.matched[0].meta.title
  next()
})

export default router

8.keep-alive

activated deactivated 只有该组件被保持了状态keep-alive时,才是有效果的

9.native

修饰符.native修饰什么时候使用？
在我们需要监听一个组件的原生事件时,必须给对应的事件加上.native修饰符,才能进行监听。