Vue router 单页面的控制中心

秒速五厘米 2023-05-31 06:53 15阅读 0赞

# vue-router #

路由 就是组件之间 进行切换的。

## 路由的配置 ##

router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [
        { 
            path:"/home",
            component:() => import('../views/Home.vue')
        },
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

## 路由的跳转 ##

标签跳转 `router-link`

<router-link to="/home">home</router-link>

事件跳转

<button @click="toHome">home</button>
    methods:{
    toHome(){
      this.$router.push({path:'/home'})
            }
    }

## 动态路由 ##

router/index.js
    
    const routes = [
        { 
            path:"/home/:id", //传递参数，参数名叫id
            //如果不传id，会找不到页面
            component:() => import('../views/Home.vue')
        },
    ]
    
    
    //使用
    { { $route.params.id}}

## 嵌套路由 ##

在一个组件里面，显示另外一个组件
    
    const routes = [
        {
            path:"/home/:id",
            component:() => import('../views/Home.vue'),
            children:[{
                path:"/child",
                component:() => import('../views/Child.vue')
            }]
        }
    ]
    
    
    在home组件里，加上 <router-view></router-view>

## 传参 ##

# 1
    this.$router.push({path:'/home'，query:{name:"jack"})
    # 2
    this.$router.push({name:'home'，params:{id:3})
    # 这个方法要给路由一个name值

## 导航守卫 ##

在main.js中
    router.beforeEach((to,from,next)=>{
    	// to 要去的路由
    	// from 从哪里来
    	// next（） 进行下一步
    	console.log(to.path)
    	next() //如果不写，会卡主
    })