526互联

Router 路由

发布时间 2023-03-22 21:11:02作者: 宁静致远.

路由组件显示占位符

 <router-view></router-view>

使用路径path 或 name 在标签中导航

<RouterLink to="ClassTest">Class</RouterLink>|
<RouterLink :to="{name:'TypeTest'}">TypeTest</RouterLink>

改变路由点击后颜色　　

<style scope>
/* 点击后点红色 */
.router-link-exact-active {
    color: red;
}
</style>

重定向路由 redirect

const routes = [
   
     {
        path:'/member',
        redirect:'/Curdform'
    }
];

404 页面 Not Found

注意：要放在路由的最后面

const routes = [
       
    {
        path:'/:catchAll(.*)',name:'NotFound', component:NotFound
    }

];

Vue Router 和 组合式 API

import {useRouter,useRoute} from 'vue-router'

async function myrouter() {
    router.push('/TypeTest')
}
async function myrouter2() {
    router.push({name:'Curdform'})
}

　

 <el-button type="primary" @click="router.go(-1)">上一页</el-button>
<el-button type="primary" @click="router.go(1)">下一页</el-button>