vue3 + vue-router

基础

安装

vue add router

router/index.js

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  },{
    path: '/new',
    name: 'New',
    component: () => import('../views/NewView.vue')
  },{
    path: '/course',
    name: 'Course',
    component: () => import('../views/CourseView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

App.vue

<template>
  <div class="menu">
    <nav class="container">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <!--   三种方式   -->
      <router-link to="/new">new1</router-link>|
      <router-link :to="{path:'/new'}">new2</router-link>|
      <router-link :to="{name:'New'}">new3</router-link>|
      <router-link to="/course">course</router-link>
    </nav>
  </div>

  <div class="container">
    <router-view/>
  </div>


</template>

<style>
.container{
  width: 800px;
  margin: 0 auto;
}

.menu {
  background-color: aqua;
  height: 40px;
  line-height: 40px;

}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

通过url传参数

App.vue

<template>
      <!--  url传值    -->
      <router-link :to="{name:'Course',query:{page:2,pageSize:10}}">course1</router-link>|
      <router-link :to="{name:'Course',query:{page:3,pageSize:11}}">course2</router-link>|
</template>

CourseView.vue

<script setup>
import {onBeforeRouteUpdate, useRoute} from 'vue-router'
  import {ref} from "vue";
  const route = useRoute()
  const name = ref('sv')
  // 获取url参数
  const page = ref(route.query.page||0)
  const pageSize = ref(route.query.pageSize||0)
  onBeforeRouteUpdate((to)=>{
    page.value=to.query.page
    pageSize.value=to.query.pageSize
  })
</script>

URL动态参数

router/index.js

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

const routes = [
  {
    //添加url params
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('../views/DetailView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

App.vue

<template>
      //传入id
      <router-link :to="{name:'Detail',query:{page:3,pageSize:11},params:{id:2}}">detail1</router-link>|
</template>

DetailView.vue

<template>
  <span>{{_id}}</span>
</template>

<script setup>
import {onBeforeRouteUpdate, useRoute} from "vue-router";
  import {ref} from "vue";

  const route = useRoute()
  //获取params
  const _id = ref(route.params.id)
  onBeforeRouteUpdate((to)=>{
    _id.value=to.params.id
  })
</script>

<style scoped>

路由嵌套

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  },{
    path: '/new',
    name: 'New',
    component: () => import('../views/NewView.vue')
  },{
    path: '/course',
    name: 'Course',
    component: () => import('../views/CourseView.vue')
  },{
    //添加url params
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('../views/DetailView.vue')
  },{
    path: '/more',
    name: 'More',
    component: () => import('../views/MoreView.vue'),
    children:[
      {
        path: '',
        // 访问more 自动显示more1
        // component: () => import('../views/More1View.vue'),
        redirect:{name:'More1'}
      },
      {
        path: 'more1',
        name: 'More1',
        component: () => import('../views/More1View.vue')
      },{
        path: 'more2',
        name: 'More2',
        component:More2View
      },{
        path: 'more3',
        name: 'More3',
        component:More3View
      },
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

HomeView.vue

<template>
  <h1>more</h1>
  <nav>
    <router-link to="/more/more1">more1</router-link>
    <router-link :to="{name:'More2'}">more2</router-link>
    <router-link :to="{path:'more3'}">more3</router-link>
  </nav>
  <router-view></router-view>
</template>

<script>
export default {
  name: "MoreView"
}
</script>

<style scoped>
</style>

编程式导航

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  },{
    path: '/new',
    name: 'New',
    component: () => import('../views/NewView.vue')
  },{
    path: '/course',
    name: 'Course',
    component: () => import('../views/CourseView.vue')
  },{
    //添加url params
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('../views/DetailView.vue')
  },{
    path: '/more',
    name: 'More',
    component: () => import('../views/MoreView.vue'),
    children:[
      {
        path: '',
        // 访问more 自动显示more1
        // component: () => import('../views/More1View.vue'),
        redirect:{name:'More1'}
      },
      {
        path: 'more1',
        name: 'More1',
        component: () => import('../views/More1View.vue')
      },{
        path: 'more2',
        name: 'More2',
        component:More2View
      },{
        path: 'more3',
        name: 'More3',
        component:More3View
      },
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="button" value="click" @click="doClick">
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const doClick = ()=>{
  router.push({name:'Detail',params:{id:2},query:{page:1,pageSize:12}})
  // router.push({name:'Home'})
  // router.push({path:'/Home'})
  // router.replace() 与push功能一样，比push少个池子
 }
</script>

导航守卫

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import More2View from "@/views/More2View";
import More3View from "@/views/More3View";
import LoginView from "@/views/LoginView";
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: LoginView
  },
  {
    path: '/',
    name: 'Home',
    component: HomeView,
    children: [{
      path: '/about',
      name: 'About',
      component: () => import('../views/AboutView.vue')
    },{
      path: '/new',
      name: 'New',
      component: () => import('../views/NewView.vue')
    },{
      path: '/course',
      name: 'Course',
      component: () => import('../views/CourseView.vue')
    },{
      //添加url params
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('../views/DetailView.vue')
    },{
      path: '/more',
      name: 'More',
      component: () => import('../views/MoreView.vue'),
      children:[
        {
          path: '',
          // 访问more 自动显示more1
          // component: () => import('../views/More1View.vue'),
          redirect:{name:'More1'}
        },
        {
          path: 'more1',
          name: 'More1',
          component: () => import('../views/More1View.vue')
        },{
          path: 'more2',
          name: 'More2',
          component:More2View
        },{
          path: 'more3',
          name: 'More3',
          component:More3View
        },
      ]
    }]
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to,from,next)=>{
  // to，即将访问路由对象
  // from，当前正要离开路由
  // next() 继续向后执行，去to的页面
  // next(false) 不跳转，还在当前页面。
  // next("/xxx")  next({name:"xxx"})  next({pat:"/xxx"})
  let token = sessionStorage.getItem('isLogin')
  if(token){
    // 已登录，可以向目标地址访问
    next()
    return
  }
  // 未登录，登录页面
  if(to.name=='Login'){
    next();
    return;
  }
  // 未登录，访问的其他地址
  next({name:"Login"})

})

export default router