美文网首页Web前端之路
Vue项目新建一个路由页面

Vue项目新建一个路由页面

作者: 祈澈菇凉 | 来源:发表于2019-05-29 08:30 被阅读239次

我们现在要新建一个测试页面,命名为Test.vue

1:在components底下新建Test.vue


<template>
    <div>我是测试界面</div>
</template>

<script>
</script>

<style>
</style>

2:打开App.vue
{name:'/components/Test',navItem:'测试界面'},

3:打开路由来,导入组件
index.js

import Test from '@/components/Test'

{
      path: '/components/Test',
      name: 'Test',
      component: Test
    }

4:查看效果


好啦,新的路由页面已经建立了。


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

相关文章

  • VUE设置默认首页与redirect重定向

    一、新建vue页面 二、默认页面路由配置 三、设置重定向页面

  • Vue项目新建一个路由页面

    我们现在要新建一个测试页面,命名为Test.vue 1:在components底下新建Test.vue 2:打开A...

  • vue常见问题收集

    新建完项目,先做好准备工作 1 定义全局路由 1.1路由懒加载,当组件太多的时候,vue这种单页面应用,如果没有应...

  • 接触vue-cli3项目

    打开test3项目新建vue router.js完成路由的引用 定义页面,开始即加载 我在first中没有写上面的...

  • Vue路由this.$router.push跳转页面不刷新

    一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没...

  • 2019-12-09Vue-cli3添加路由

    Vue-cli3新建项目后相比Vue-cli2少了很多东西,需要自己来安装使用路由。步骤如下: 安装路由 创建ro...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • Vue 创建博客前端-DAY3-文章详情页面

    添加文章详情页面 在 view 目录下新建 ArticleView.vue 展示文章详情。 配置路由 在 rout...

  • 与Vue.js的第九天

    今天学习了路由 路由 路由 路由vue-router是vue的核心组件根据不同的url访问不同页面配合单页面使用 ...

  • vue新建页面

    在src下面新建view文件夹,然后新建一个vue页面(以/src/view/home.vue为例)vue页面中只...

网友评论

    本文标题:Vue项目新建一个路由页面

    本文链接:https://www.haomeiwen.com/subject/envvzqtx.html