美文网首页
2019-12-09Vue-cli3添加路由

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

作者: Kason晨 | 来源:发表于2019-12-25 17:19 被阅读0次

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

安装路由

npm install vue-router

创建router.js与mian.js同级

router.js中的内容为

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import Home from './pages/home'
import A from './components/a'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/home', name: 'Home', component: Home },
    { path: '/a',  name: 'A', component: A},
  ]
})

在main.js中添加如下内容

重要:一定要在App.vue加 <router-view />标签

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style>
</style>

就可以开始使用路由了,在需要使用路由的地方加入以下内容

<router-link to="/">主页</router-link>     //切换到指定的组件
<router-link to="/main">主页</router-link>
<router-link to="/admin">管理页</router-link>
<router-view/>  //组件显示的地方

也可通过事件的方法来使用路由


methods:{
  toMain() {
    this.$router.push('./main');  //跳转到指定组件
  },
 
  //使用路由返回上一级
  goBack() {
    window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
  },
}

相关文章

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

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

  • express CRUD

    添加路由拼接 修改路由途径 将路径加上 restful风格 - rest,并添加动态路由 :resource 添加...

  • centos 添加静态路由

    一、添加永久静态路由 二、添加临时路由

  • 20220726-Alma Linux8添加静态路由

    一、临时添加和删除静态路由 1、显示路由表 2、临时添加静态路由 3、临时删除静态路由 二、设置永久的静态路由 永...

  • RouterOS PCC 负载均衡

    vrrp冗余路由协议/ip route 添加路由标签 route mark/ip firewall mangle 添加

  • [vue-router] Duplicate named rou

    翻译:vue-router 重复的命名路由定义静态路由:只需要修改重复 name动态路由:没有添加过才添加

  • 添加路由

    Mac: Windows: Mac永久添加路由: 在Launchpad 中找到 Automastor 制作工具...

  • 简单的路由守卫

    需要在配置路由时给路由添加meta,如下:

  • linux命令

    查询进程并杀掉进程 查看路由 添加路由

  • ruby on rails(七) 路由

    member,添加成员路由,只需在 resource 块中添加 member 块: Rails 路由能够识别 /n...

网友评论

      本文标题:2019-12-09Vue-cli3添加路由

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