Vue路由安装和入门

目录

下载安装:

引入路由

确定路由窗口:

准备路由表

挂载路由

跳转标识符

路由重定向

路由多视图

路由懒加载

---

下载安装:

npm i vue-router

引入路由

<script src="路由文件"></script>

确定路由窗口:

当操作标识符时候,内容展现的位置

<router-view></router-view>

准备路由表

const router=VueRouter.createRouter({
      //添加配置项
    //配置路由切换模式
    //hash模式//历史记录模式
    history:createWebHashHistory()
    routes:[
        {
            path:'路径',
            component:文件
        }
    ]
})

挂载路由

//创建实例
const { createApp } = Vue
const app=createAPP({
    data(){
        return{}
    }
})
    .use(路由)
    .mount('#app')

跳转标识符

<router-link to="/">跳转点击<router-link>

路由重定向

在路由之前

{
    path:'路径'.
    redirect:'跳转地址'
}

路由多视图

第一个视图默认是default(给视图命名{name="名称"})

{
    path:路径,
    components:{
       default:组件1,
       视图二:组件二
    }
}

路由懒加载

{
   //单页面程序
    path:路径,
    components:{
       default:组件1,
       视图二:组件二
    }
}

//路由懒加载--按需加载
{
    path:'路径'
    component:()=>import('路径')
}