Vue-cli and Vue-router基本使用

本文详细介绍如何使用 Vue CLI 创建项目,并通过 Vue Router 实现页面路由管理。包括安装配置过程、基本语法介绍、路由参数传递及嵌套路由配置等关键知识点。

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

vue-cli

准备工作

  1. 下载node.js
  2. 下载vue-cli脚手架 npm install vue-cli -g
  3. 下载webpack打包工具 npm install webpack -g
  4. 其余所需到网上下载并学习

vue-router

基础语法

  1. <router-link to="/url"></router-link>
    <router-link to="url"></router-link>
    //带参
    <router-link :to="name : 'urlName' , params : {id :1 }"
    
  2. //导入vue 与 VurRouter
    import Vue from 'vue'
    import VueRouter from "vue-router";
    //导入组件
    import User from '../components/user'
    /*安装router*/
    Vue.use(VueRouter);
    //进行配置
    export default new VueRouter({
    
      routes: [
        {
          /*跳转路径*/
          path: '/url',
          /*跳转名称*/
          name: 'urlName',
          /*跳转组件*/
          component: urlName,
        },
        //带参
        {
            path: '/url/:id',
            name: 'urlName',
            component : UerName
            props : true
        },
        //路由嵌套
       	{
            path: '/url/:id',
            name: 'UerName',
            component : UerName,
            children:[
                {
                   path: 'url/smallUrl/:id',
                   name: 'smallUrlName',
                   component : smallUrlName
                }
            ]
        },
        //重定向
        {
            path:'/urlName',
            redirect:'url'
        }
      ]
    
    });
    
    
  3. //接参vue
    <<template>
    
        <h1>aaaa{{id}}</h1>
    
    </template>
    
    <script>
        export default {
            name: "User",
            props:['id']
        }
    </script>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值