配置路由

目录

• 1.在构建的vue3项目中安装vue-router
• 2.创建路由
• 3.挂载router
• 4.配置路由
• 5.使用路由组件
• 6.测试

1.在构建的vue3项目中安装vue-router

• npm install vue-router --save

2.创建路由

• 在src/router/index.ts

//通过vue-router插件实现模板路由配置
import {createRouter,createWebHashHistory} from 'vue-router';
import {constantRoute} from './routes';
//创建路由器
let router = createRouter({
    //路由模式hash
    history:createWebHashHistory(),
    routes:constantRoute,
    //滚动行为
    scrollBehavior(){
        return {
            left:0,
            top:0
        }
    }
});
export default router;

3.挂载router

• 在src下的main.ts文件导入

4.配置路由

• 确定需要配置路由的两个页面
  

• 在src/router/routes.ts配置

//对外暴露配置路由（常量路由）:全部用户都可以访问到得路由
export const constantRoute = [
    {
        //登录
        path:'/login',
        component:()=>import('../views/login/index.vue'),
        name:"login",//命名路由
    },
    {
        //主页
        path:'/home',
        component:()=>import('../views/home/index.vue'),
        name:"home",//命名路由
    }
]

5.使用路由组件

• src/App.vue中使用路由组件
  

6.测试