Vue3_路由

快速入门

• 安装：npm i vue-router

• 定义路由：router/index.ts

  import {createRouter,createWebHistory} from 'vue-router'
  import Home from '@/components/Home.vue'
  import News from '@/components/News.vue'
  import Detail from '@/components/Detail.vue'
  
  const router = createRouter({
      history: createWebHistory(),
      routes:[
          {
              path:'/home',
              component:Home
          },
          {
              path:'/news',
              component:News,
              children:[
                  {
                      name:'xiangqing',
                      path:'/detail/:id/:title?',
                      component:Detail,
                      props:true
                  }
              ]
          }
      ]
  })
  export default router
  

• 挂载路由

  import router from './router'
  
  const app = createApp(App)
  app.use(router)
  app.mount('#app')
  

• 使用路由

  <template>
      <RouterLink to="/home" active-class="active">首页</RouterLink><br>
      <RouterLink to="/news" active-class="active">新闻</RouterLink><br>
      <RouterView></RouterView>
  </template>
  
  <script setup lang="ts">
  import {RouterView, RouterLink} from 'vue-router'
  </script>
  

重定向

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

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            path:'/',
            redirect:'/home'    <!--重定向 -->
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
export default router

路由传参

• query方式

  <！-- News.vue-->
  <template>
      <div>
          <ul>
              <li v-for="news in list" :key="news.id">
                  <RouterLink 
                      :to="{
                          path:'/news/detail',
                          query:{
                              id : news.id,
                              title: news.title 
                          }
                      }">
                      {{ news.title }}
                  </RouterLink>
              </li>
          </ul>
          
          <div style="border: 1px solid red; width: 500px; height: 400px;">
              <RouterView></RouterView>
          </div>
      </div>
  </template>
  
  <script setup lang="ts">
  import { reactive } from 'vue';
  import { RouterLink, RouterView } from 'vue-router';
  const list = reactive([
      { id:1, 'title': '新闻1' },
      { id:2, 'title': '新闻2' },
      { id:3, 'title': '新闻3' }
  ])
  </script>
  

  <!-- Detail.vue-->
  <template>
      {{route.query.id}}
      {{route.query.title}}
  </template>
  
  <script setup lang="ts">
  import {useRoute} from 'vue-router'
  const route = useRoute()
  </script>
  

• params方式

  <！-- News.vue-->
  <template>
      <div>
          <ul>
              <li v-for="news in list" :key="news.id">
                  <RouterLink 
                      :to="{
                          name:'ccb',   // params传参时，这个地方只能写路由组件的名称
                          params:{
                              id : news.id,
                              title: news.title 
                          }
                      }">
                      {{ news.title }}
                  </RouterLink>
              </li>
          </ul>
          
          <div style="border: 1px solid red; width: 500px; height: 400px;">
              <RouterView></RouterView>
          </div>
      </div>
  </template>
  
  <script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router';
  </script>
  

  <!-- Detail.vue-->
  <template>
      {{id}}
      {{title}}
  </template>
  
  <script setup lang="ts">
  defineProps(['id', 'title'])
  </script>
  

• 编程式

  <!-- News.vue-->
  <template>
      <div>
          <ul>
              <li v-for="news in list" :key="news.id">
                  <RouterLink 
                      :to="{
                          name:'xiangqing',
                          params:{
                              id : news.id,
                              title: news.title 
                          }
                      }">
                      {{ news.title }}
                  </RouterLink>
                  <button @click="showDetails(news)">查看详情</button>
              </li>
          </ul>
          
          <div style="border: 1px solid red; width: 500px; height: 400px;">
              <RouterView></RouterView>
          </div>
      </div>
  </template>
  
  <script setup lang="ts">
  import { RouterLink, RouterView, useRouter} from 'vue-router';
  
  const router = useRouter()
  function showDetails(news:any){
      router.push({
          name:'xiangqing',
          params:{id:news.id, title: news.title}
      })
  }
  </script>
  

  <!-- Detail.vue-->
  <template>
      {{id}}
      {{title}}
  </template>
  
  <script setup lang="ts">
  defineProps(['id', 'title'])
  </script>
  

全局路由守卫

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Login from '@/components/Login.vue'

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            name:'News',
            path:'/news',
            component:News,
            meta:{'required':true},   // 加一个标识，标识该组件需要登录后才能访问
        },
        {
            name:'Login',
            path:'/login',
            component:Login
        }
    ]
})

router.beforeEach((to, from, next) => {
    let flag = localStorage.getItem("token")

    if(to.meta.required && !flag){
        next({name:'Login'})
    }
    else{
        next()
    }
  })

router.afterEach((to, from) =>{
    console.log('后置拦截')
})
export default router