Vue-cli and Vue-router基本使用

最新推荐文章于 2022-08-24 00:21:47 发布

SadFat

最新推荐文章于 2022-08-24 00:21:47 发布

阅读量105

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/HSSjava/article/details/108745973

版权

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

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

                    
                        
                    
                    vue-cli 
准备工作 
下载node.js
下载vue-cli脚手架 npm install vue-cli -g
下载webpack打包工具 npm install webpack -g
其余所需到网上下载并学习
 
vue-router 
基础语法 
 <router-link to="/url"></router-link>
<router-link to="url"></router-link>
//带参
<router-link :to="name : 'urlName' , params : {id :1 }"
 
 //导入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'
    }
  ]

});

 
 //接参vue
<<template>

    <h1>aaaa{{id}}</h1>

</template>

<script>
    export default {
        name: "User",
        props:['id']
    }
</script>
 

                