Vue-router learning01

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30568715

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/momei/p/7255786.html

本文介绍Vue-router的基础使用方法，包括安装、配置路由、导航制作、子菜单路由设置及参数传递等核心内容，并演示多路由区域操作及URL参数传递的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：vue-router 是WebApp链接路径管理系统。

安装 vue-router

npm install vue-router --save-dev

路由文件 router/index.js：

import Vue from 'vue'                    //引入Vue
import Router from 'vue-router'          //引入vue-router
import Hello from '@/components/Hello'   //引入Hello.vue组件

Vue.use(Pouter)  //全局使用router
export default new Router({
  routes: [
    {                    //每一个链接都是一个对象
      path: '/', 
      name: 'Hello',     //路由名称
      component: Hello   //对应的组件模板
    }
  ]
})

添加文件components/demo.vue：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>
    </div>
</template>

<script>
    export default {
        name: 'demo',
        data() {
            return {
                 msg: 'Hello I am demo.vue'        
            }
        }
    }
</script>

引入demo组件：

import demo from ‘@components/demo'

配置路由：

{
 path: '/demo',
 name: 'demo'
 component: demo        
}

通过以上操作，我们就有了两个页面，通过改变地址栏可以看到 hello.vue 页面的内容和 demo.vue 页面的内容，接下来我们来实现导航制作。

制作导航：

<router-link to='path'>导航文字</router-link>

path为index.js中配置的path值。

通过以上代码，我们算是了解了vue-router的基本用法，接下来我们认识子菜单的路由方法。

在App.vue页面进行代码编写：

<p>导航 ：
      <router-link to="/">首页</router-link> | 
      <router-link to="/dmoe">dmoe页面</router-link> |
      <router-link to="/demo/Cdemo">Cdemo页面</router-link> |
</p>

接下来编写demo页面：

<template>
    <div class="demo">
        <h4>{{ msg }}</h4>

        <router-view class='Cdemo'><router-view>
    </div>
</template>

<script>
    export default {
        name: 'demo',
        data() {
            return {
                 msg: 'Hello I am demo.vue'        
            }
        }
    }
</script>

router-view 给子模版提供插入的位置。

新建Cdemo组件模板：

<template>
  <div class="Cdemo">
    <h4>{{ msg }}</h4>
  </div>
</template>
<script>
export default {
  name: 'Cdemo',
  data () {
    return {
      msg: 'Hello I amCdemo'
    }
  }
}

引入Cdemo：

import Cdemo from '@comonents/Cdemo'

配置路由，由于Cdemo为子路由，在原有的路由配置下加入children字段：

children: {
 {path: '/',component: Cdemo}
 {path: 'Cdemo',component: Cdemo} 
}

子路由在现实中使用还是比较常用的，需要熟练的掌握。

vue-router参数传递:

name传值并被显示在模板里，路由文件中路由配置的name属性在模板中用 $router.name 接收：

<p>{{ $route.name}}</p>

<router-link>标签中的to属性传值：

<router-link :to="{name:xxx,params:{key:value}}">link</router-link>

此处需要注意to要进行绑定。name：路由配置文件中的name值。params：要传递的参数。

编写App.vue页面：

<router-link :to="{name:'Cdemo',params:{username:'momei'}}">Cdemo</router-link>

修改路由配置：

{path:'/Cdemo',name:'Cdemo',component:Cdemo},

完成上面的操作之后在Cdemo.vue中进行接收。

{{$route.params.username}}

额页面输出momei。

多路由区域操作

建立一个新项目，打开App.vue用router-view标签进行布局。

<router-view ></router-view>
<router-view class="fl_nav" name="left"></router-view>
<router-view class="fr_nav" name="right"></router-view>

页面各部分引入路由：

import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

配置路由：

routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    } 
  ]

‘/’根路径，‘/Hi’路径，components中，我们对三个区域定义了现实内容。

Hi1.vue页：

<template>
    <div>
        <h4>{{ msg }}</h4> 
    </div>
</template>
 
<script>
export default {
  name: 'hi1',
  data () {
    return {
      msg: 'I am Hi1 page.'
    }
  }
}
</script>

Hi2.vue页：

<template>
    <div>
        <h4>{{ msg }}</h4>
    </div>
</template>
 
<script>
export default {
  name: 'hi2',
  data () {
    return {
      msg: 'I am Hi2 page.'
    }
  }
}
</script>

在App.vue中配置link：

<router-link to="/">首页</router-link> | 
<router-link to="/hi">Hi页面</router-link> |

vue-router url的参数传递

：冒号的形式传递参数：首先配置index.js路由

{
    path:'/params/:name/:cnblogs',
     component:Params
}

新建Params组件，页面中输出name和cnblogs

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>网名：{{ $route.params.name}}</p>
        <p>博客：{{ $route.params.cnblogs}}</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

App.vue加入<router-link>标签，利用url传值。

<router-link to="/params/墨 眉/http://www.cnblogs.com/momei/">params</router-link> |

转载于:https://www.cnblogs.com/momei/p/7255786.html