vue3.0配置vue-router

第一步：安装集成安装包

npm install vue-router --save

第二步：我们去package.json去看一下，如果vue-router是4.0.0以上的就是支持vue3的

文档>>

第三步：向应用中添加vue-router的实例

1、打开main.ts

引入vue-router

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from "./views/Home.vue"
import Login from "./views/Login.vue"
import ColumnDetail from "./views/ColumnDetail.vue"
import App from './App.vue'

const routerHistory = createWebHistory() // 引入路由方式
const router = createRouter({
    history: routerHistory, // 表示接入哪种类型的路由
    routes: [ // 定义路由信息
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/column/:id', // 冒号后面表示传的动态参数
            name: 'column',
            component: ColumnDetail
        }
    ]
})

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

配置

    <router-view></router-view>

跳转

      <router-link class="navbar-brand" to="/">者也专栏</router-link>
        <ul v-if="!user.isLogin" class="list-inline mb-0">
            <li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">登陆</router-link></li>
            <li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">注册</router-link></li>
        </ul>

路由URL传参数的方式

1、HTML中两种跳转方式

// 第一种：对象方式
<router-link :to="{name: 'column', params: {id: column.id }}" class="btn btn-outline-primary">进入专栏</router-link>
// 第二种：模版字符串方式
<router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>

2、编程式跳转

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router' 
// 请注意这里引入的是useRouter，和下面的引入 的useRoute不一样，虽然差一个字母，
// 引入useRoute是获取路由的信息，useRouter是定义路由的一系列行为，完全不一样
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import createMessage from '../components/createMessage'

export default defineComponent({
  name: 'Login',
  components: {
    // ValidateInput,
    // ValidateForm
  },
  setup() {
    const emailVal = ref('')
    const router = useRouter() // 1、获取useRouter
    const store = useStore()
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordVal = ref('')
    const passwordRules: RulesProp = [
      { type: 'required', message: '密码不能为空' }
    ]
    const onFormSubmit = (result: boolean) => {
      if (result) {
        const payload = {
          email: emailVal.value,
          password: passwordVal.value
        }
        store.dispatch('loginAndFetch', payload).then(data => {
          createMessage('登录成功 2秒后跳转首页', 'success')
          setTimeout(() => {
            router.push('/') // 2、我们可以使用push使他跳转到首面
            // router.push({name: 'column', params:{ id : 1}}) // 传动态参数
          }, 2000)
        }).catch(e => {
          console.log(e)
        })
      }
    }
    return {
      emailRules,
      emailVal,
      passwordVal,
      passwordRules,
      onFormSubmit
    }
  }
})
</script>

3、使用vue-router提供的钩子函数获取路由参数

import { defineComponent } from 'vue'
import { useRoute } from 'vue-router' // 注意写法，是useRoute不是useRouter
import { testData, testPosts } from '../testData'
import PostList from '../components/PostList.vue'
export default defineComponent({
    components: {
        PostList
    },
    setup() {
        const route = useRoute()
        const currentId = +route.params.id; // +表示将字符串类型数字转成数字类型
        const column = testData.find(c => c.id === currentId)
        const list = testPosts.filter(post => post.columnId === currentId)
        return {
            column,
            list
        }
    }
})