首页 > 其他分享 >vue2 - router 的基本使用,安装router,配置router,router 标签

vue2 - router 的基本使用,安装router,配置router,router 标签

时间:2023-02-18 14:55:28浏览次数:38  
标签:Vue 标签 AppShow AppHome vue vue2 import router

1.安装router

npm install vue-router

 

2.定义router路由导航 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
//引入组件
import AppHome from "@/components/AppHome";
import AppShow from "@/components/AppShow";

//使用Router
Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: "/home",
      component: AppHome,
      name: "AppHome"
    },
    {
      path: "/show",
      component: AppShow,
      name: "AppShow"
    }
  ]
})

 

3.使用router(main.js)

import Vue from 'vue'
import App from './App.vue'

import router from "@/router";

Vue.config.productionTip = true
new Vue({
  render: h => h(App),
  //使用router
  router
}).$mount('#app')

 

4.router标签

//跳转标签
<router-link to="/home">Home页</router-link>
<router-link to="/show">Show页</router-link>

//显示相关内容标签
<router-view></router-view>

 

标签:Vue,标签,AppShow,AppHome,vue,vue2,import,router
From: https://www.cnblogs.com/ErenYeager/p/17132604.html

相关文章

  • vue2 - vuex 状态管理工具
    1.什么是vuex状态管理工具vuex是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大......
  • vue2 - 插槽solt,默认插槽,具体名插槽,作用域插槽
    1.默认插槽作用:会把父组件human中的内容全部解析到子组件中的slot中父组件:<template><divid="App"><!--子组件--><human><!--解析到子组件中的内......
  • Html中<img>标签的使用
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width......
  • vue2 vue-router.esm.js:16 [vue-router] Failed to resolve async component default
    敢信,晚上加班找这个错误,TMD找了二小时,网上各种百度。。。。。。原因竟然是这个ProductCategory组件,没有import进来,而components中却引用了!!!!低级错误,粗心问题!!!这也再次证......
  • MPLS 标签分发协议
    LSP的路径形成,一共分为两种模式,一种是静态,一种是动态分发。静态在前面已经说过了,那么这篇文章就着重讲一下LDP标签分发协议。在MPLS网络中,路由器通过运行LDP协议为每......
  • vue2 - $nextTick 在下一次DOM更新结束后 指定其回调
    Vue实现响应式并不是数据发⽣变化之后DOM⽴即变化,⽽是按⼀定的策略进⾏DOM的更新。$nextTick是在下次DOM更新循环结束之后执⾏延迟回调,在修改数据之后使⽤$next......
  • 直播app开发,css让图片在a标签里垂直居中
    直播app开发,css让图片在a标签里垂直居中<style>.close{display:flex;align-items:center;text-align:center;}.closeimg{height:25px;}</style> <ahref="javascript......
  • vue2 - 组件中的通信,props,全局事件总线
    props属性:作用是让父组件可以给子组件传递data中的数据注意子组件不能修改props中的数据,只能访问父组件<template><divid="App"><!--给组件传入参数-->......
  • vue2 - 自定义插件 使用插件,scoped
    1.自定义插件myPlugin.jsexportdefault{install(Vue){console.log("Vue.use()会调用此方法",Vue)}} 2.使用插件importVuefrom'vue'importAp......
  • HTML 标签简写及全称
    下表列出了HTML标签简写及全称:标签英文全称中文说明aAnchor锚abbrAbbreviation缩写词acronymAcronym取首字母的缩写词addressAddress地址alta......