vue-router的使用

Vue关键内容

1.

创建一个模板

<template>
  <div id="app">
    <div style="color:red">ysk</div>
  </div>
</template>

2.

将此模板导出,别处可引用

export default {
  name: 'App',
}

3.

导入模板

import Demo from "./components/Demo";
//
components: {
    Demo
  }

4.

使用模板

<template>
  <div id="app">
    <div style="color:red">ysk</div>
    <Demo/>//-------------------------
  </div>
</template>
<script>
import Demo from "./components/Demo";

export default {
  name: 'App',
  components: {
    Demo//--------------------------
  }
}

安装命令

在vue项目的根目录下执行：npm install vue-router --save-dev
npm install vue-router:文件即会下载到node_modules文件夹中
--save-dev:保存至开发配置中，

使用Vue-Router

• 导入vue和router组件

• 显示的使用路由VueRouter

• 创建路由

//导入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Demo from "../components/Demo";
import Index from "../components/Index"
//显示使用VueRouter
Vue.use(VueRouter)

export default new VueRouter({
  routes:[//所有跳转路径配置,数组可定义多个
    {
      path: "/demo",//路由跳转路径
      name: "Demo",//路由名称
      component: Demo//路由跳向，上方导入的.vue模块
    },
    {
      path: "/index",//路由跳转路径
      name: "Index",//路由名称
      component: Index//路由跳向，上方导入的.vue模块
    }
  ]
});

• 两个组件
  
• 在main.js中加载路由
  import Router from "./routers/"
router:Router //配置路由,

import Vue from 'vue'
import App from './App'
import Router from "./routers/"


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router:Router,
  components: { App },
  template: '<App/>'
});

• 页面使用

<template>
  <div id="app">
    <h1 style="color:red">ysk</h1>
    <router-link to="/demo">首页</router-link>
    <router-link to="/index">模块一</router-link>
    <router-view></router-view>
  </div>
</template>

• 页面效果：点击对应的链接即可显示不同模块