vue-cli vue-router 一写就会的简单入门实例

淩亂°似流年 2023-02-13 05:40 4阅读 0赞

# 项目创建 #

*  前提本机已经搭建好vue-cli脚手架，创建vue项目
 *  进入自己想创建的目录,创建`demo`的vue项目

> vue create demo

*  也可以使用,下面命令，进入网页进行vue项目的创建

> vue ui

*  安装完成启动默认vue项目

> npm run serve

*  http://localhost:8080/ 进行访问，默认项目已经完成  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]

# vue-router路由引入 #

*  进入项目目录，这里是`demo`,安装完毕，在项目中进行引用

> npm install vue-router

*  在`src`文件夹下新建`router.js`路由文件

import Vue from 'vue'
    import Router from 'vue-router'
    //@表示src文件目录
    import Hello from '@/components/Hello'//组件
    import World from '@/components/World'
    
    Vue.use(Router)
    
    export default new Router({ 
    mode:'history',//去掉url#
    routes:[{ 
        path:'/',
        name:'Hello',
        component:Hello
    },
    { 
        path:'/world',
        name:'World',
        component:World
    }
    ]
    })

*  `mian.js`中引入路由

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({ 
        router,
      render: h => h(App),
    }).$mount('#app')

*  `App.vue`公共文件进行路由地址配置和渲染

<template>
      <div id="app">
      <h1>App.vue中的内容</h1>
      <router-link to='/world'>进入world页面</router-link>
     <router-view></router-view>//用于路由组件页面渲染
      </div>
    </template>
    
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

*  创建路由名`'Hello'`的组件，`components/Hello.vue`,路由地址`'/'`，即首页就显示组件`Hello.vue`中的内容

<template>
            <div class='hello'>
            <h2>{ { msg}}</h2>
            </div>
        </template>
    
        <script>
    export default{ 
        name:'Hello',
        data () { 
        return{ 
        msg:'我是src/components里的hello.vue，我通过app.vue里的router-view展示'
        }
        }
    
    }
        </script>}

*  创建路由名`‘World’`的组件，`components/World.vue`,路由地址`'/world'`,访问显示`World.vue`中的内容

<template>
            <div class='world'>
            <h2>{ { msg}}</h2>
            </div>
        </template>
    
        <script>
    export default{ 
        name:'Hello',
        data () { 
        return{ 
        msg:'world 世界你好'
        }
        }
    
    }
        </script>}

*  效果如下，首页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]
 *  /world地址  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527153314769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527155740354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200527155809847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw==,size_16,color_FFFFFF,t_70