Vue多种路由Router用法

目录

Vue多种路由Router用法

命名路由:

用路由router传参

命名试图

重定向

404

嵌套路由

---

命名路由:

在路由里可以用path也就是路径来设置，也可以用name名字来设置,两个都可以去跳转

<router-link :to="{path:'/luyou1',query:{name:'你好',age:20}}">传参</router-link>|
<router-link :to="{name:'luyou2',params:{name:'你好啊',age:40}}">传参2</router-link>|

用路由router传参

params：获取路径参数

query：获取查询参数

1.用query传参

<router-link :to="{path:'/luyou1',query:{name:'你好',age:20}}">传参</router-link>|

接收参数

{{$route.query.name}}|{{$route.query.age}}

2.用params传参

<router-link :to="{name:'luyou2',params:{name:'你好啊',age:40}}">传参2</router-link>|

接收参数

{{$route.params.name}}|{{$route.params.age}}

也可以使用占位符占位，在路径那里，然后接收的时候也用这个形式接收

    path: '/luyou2/:name/:age',

命名试图

给路由视图起名字，不写name的时候，是defalut

让每个路由的值都放在对应的router-view上面

           <!-- 默认名是default -->
            <router-view  />
           <!-- 路由出口视图 -->
            <router-view name="a"/>
            <hr/>
            <router-view name="b"/>

在路由里设置相对应的name

{
    path: '/test',
    name: 'test',
    components:{
        "default":()=> import(/* webpackChunkName: "about" */'../views/luyou/luyou1.vue'),
        "a":()=> import(/* webpackChunkName: "about" */ '../views/luyou/luyou2.vue'),
        "b":()=> import(/* webpackChunkName: "about" */ '../views/luyou/test.vue'),
    }

效果：

重定向

默认进入到login页面里

 {
    path: '/',
    name: 'home',
    // component: HomeView,
    redirect:'/login'//默认访问的登录页面
  },

404

*，匹配所有路径，一般用来定义404的访问组件，注意书写的顺序，放到路由最后

当没有这个路径时会跳转到我们自己的404页面

{
    path: "/:a*",//访问没有的路径
​
    component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')
  },

嵌套路由

vue项目只有一个index.html页面，在index.html页面上加载了App.vue模板，App.vue中有一个<router-view>视图窗口，通过路由，改变了router-view中加载模板，达到显示信息动态改变得效果。

默认只有一个html页面，默认只有一个视图窗口。

根据项目需求，有时候需要在App.vue中连接得模板内嵌套router-view，改变当前模板自己得显示内容。

在路由里再加上路由

{
    path: '/main',
    name: 'main',
​
    component: () => import(/* webpackChunkName: "about" */ '../views/main.vue'),
    children:[
        {
          path: '/about',
          name: 'about',
          component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
        },
        {
          path: '/axios',
          name: 'axios',
          component: () => import(/* webpackChunkName: "about" */ '../views/axios.vue')
        },
    ]
    
  },

main页面

<template>
    <div class="common-layout">
        <el-container>
            <el-header>Header</el-header>
            <el-container class="layout-container-demo" style="height: 500px">
                <el-aside width="200px">
                    <el-scrollbar>
                        <el-menu :default-openeds="['1', '3']" >
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon>Navigator One
                                </template>
                                
                                    <el-menu-item @click="changeMenu('/about')" >Option 1</el-menu-item>
                                    <el-menu-item  @click="changeMenu('/axios')">emp</el-menu-item>
                                
                                
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-main>
                        
                        <!--  存放视图 -->
                        <router-view/>
                        
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
​
<script>
    
    
    export default{
        methods:{
            changeMenu(url){
                this.$router.push(url)
            }
        }
        
        
        
    }
</script>
​
<style>
</style>

main是一个路由，在路由里面又加入了两个路由，也就是父和子的关系