Vue-router路由

最新推荐文章于 2024-08-09 11:41:07 发布

cheng不会秃头呀

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量179

点赞数

分类专栏： Vue 文章标签： vue css vue.js html5 node.js

本文链接：https://blog.csdn.net/qq_42880033/article/details/108973936

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue-router的使用，包括安装、基本用法、命名路由、路由重定向和嵌套路由。重点是通过一个嵌套子菜单的实例，展示了如何在Vue应用中实现路由的动态导航和参数传递。

摘要由CSDN通过智能技术生成

菜菜菜鸟日记—Vue-router路由机制（嵌套子菜单实例）

一.了解Vue-router
1.vue-router是vue的一个插件，需要安装使用。将不同的url对应不同的组件，比较适合单页面开发。
2.使用cdn引入vue-router插件

     <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>

二.Vue-router基本使用
1.定义组件（最终目的是将路由和组件结合）

<script>
var cheng={
             template:`<div>this is my component</div>`
         }
</script>

2.定义路由

<script>
var router=new VueRouter({
            routes:[{
                path:'/cheng',
                component:cheng
            },
            {
            	path:'/.....',
            	component:.....
            }]
        })
</script>

3.将路由挂载到Vue实例

<script>
 new Vue({
            el:'#CC',
            router
        });
</script>

4.书写模板内容

<div id="app">
        <h1>vue-router页面</h1>

        <router-link :to='student'>跳转到student页面</router-link>
        <router-link :to=''>跳转到....页面</router-link>
        <router-view></router-view>
    </div>

5.router-link的几种形式
为方便后期代码维护：router-link内代码也可写成变量形式。

<router-link :to='student'>跳转到student页面</router-link>
//Vue实例的data属性中添加student变量值： data: {student: { path: "/student" }},

使用query传递参数,参数会拼接到地址栏，在当前组件中使用$route.query获取参数

<script>
	<router-link :to='{path:"/a",query:{id:9}}'>跳转到a页面</router-link>
</script>

使用parmas传递参数，需要使用命名路由,参数不会拼接到地址栏，在组件中通过$route.parmas获取参数。

<script>
  <router-link :to='{name:"a",params:{id:10}}'>跳转到a页面</router-link>
  </script>

三.命名路由
在配置路由的时候，为路由指定name属性，相当于为该路由进行命名，方便后期的路由跳转，传递参数。

<script>
 var router = new VueRouter({
                routes: [ {
                    path: '/cheng',
                    name: 'cheng-a',
                    component: cheng
                }]
            });
  </script>

四.路由重定向
当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

<script>
 var router = new VueRouter({
                routes: [{
                    path: '/',
                    redirect: '/student'//默认进入页面先跳转到student页面
                }, {
                    path: '/student',
                    name: 'student-a',
                    redirect:'/teacher', //跳进teacher路径内容
                    component: student
                }]
            });
</script>

五.嵌套路由
被渲染组件可以包含自己的嵌套，需要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置。
下面利用嵌套路由实现一个小的嵌套导航实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
    <script src='./vue-router.js'></script>
    <script>
window.onload=function(){
    //1.定义组件
    var student={
       template:`
        <div>
            <h1>student-list页面</h1>    
        </div>
       `
    }
    var teacher={
        template:` 
        <div>
            <h1>teacher-list页面</h1>
            <router-link to='/a'>a页面</router-link>    
            <router-link to='/b'>b页面</router-link> 
            <div>
                <router-view></router-view>
            </div>   
        </div>`
    }
    var user={
        template:` 
        <div>
            <h1>user-list页面</h1>    
        </div>`
    }
    var a={template:` 
        <div>
            <h3>a-list页面</h3>    
        </div>`}
    var b={template:` 
        <div>
            <h3>b-list页面</h3>    
        </div>`}
    //2.定义路由
    var router=new VueRouter({
        routes:[{
            path:'/',
            redirect:'/student'
        },{
            path:'/student',
            name:'student-a',
           /*  redirect:'/teacher', */
            component:student
        },{
            path:'/teacher',
            name:'teacher-a',
            component:teacher,
            children:[{
                path:'/a',
                component:a
            },{
                path:'/b',
                component:b
            }]
        }]
    });
    //3.挂载到实例上
    new Vue({
        el:"#app",
        data:{
            student:{path:"/student"}
        },
        router
    });

}
    </script>
</head>
<body>
    <div id="app">
        <h1>vue-router页面</h1>

        <router-link :to='student'>跳转到student页面</router-link>
        <router-link :to='{path:"/teacher",query:{id:9}}'>跳转到teacher页面</router-link>
        <div id="content">
            <router-view></router-view>
        </div>
    </div>
</body>
</html>

cheng不会秃头呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router路由

菜菜菜鸟日记—Vue-router路由机制（嵌套子菜单实例）一.了解Vue-router1.vue-router是vue的一个插件，需要安装使用。将不同的url对应不同的组件，比较适合单页面开发。 2.使用cdn引入vue-router插件 <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>一.Vue-router基本使用1.定
复制链接

扫一扫

专栏目录