【VUE】2.渲染组件&重定向路由

1.删除多余组件,使环境赶紧

  1. 整理App.vue, 删除多余内容,在template 模板区域增加一个路由占位符

router-view:渲染路径匹配到的视图组件
<template>
  <div id="app">
    <!--路由占位符-->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

  2.删除components下的所有组件

  3.删除views文件夹

  4.整理路由规则:router -> index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 路由规则
const routes = [

]

const router = new VueRouter({
  routes
})

export default router

  5.npm run serve 启动正常

 

2.渲染新的组件

  1. components -> 新增Demo1.vue, 一个组件包括3个部分:1.结构,2.行为,3.样式 , 样式scoped 表示当前样式只在当前组件中生效

<template>
     <div>this is demo1</div>
</template>

<script>
export default {
     
}
</script>

<style lang="less" scoped>

</style>

  2. 到路由中添加路由规则 router -> index.js  

    1. 导入组件

    2.添加路由规则 :路由路径,名字,组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Demo1 from '../components/Demo1.vue'

Vue.use(VueRouter)
// 路由规则
const routes = [
  {
    path: '/demo1',
    name: 'Demo1',
    component: Demo1
  }
]

const router = new VueRouter({
  routes
})

export default router

  3.访问:http://localhost:8080/#/demo1

【VUE】2.渲染组件&重定向路由

 

 

3. 路由重定向

  1. 在router -> index.js 中新增一个路由规则, 访'/’的时候跳转‘/demo1’

const routes = [
  {
    path: '/',
    redirect: '/demo1'
  },
  {
    path: '/demo1',
    name: 'Demo1',
    component: Demo1
  }
]

 

  

  

上一篇:HTTP--Request详解


下一篇:k8s学习(六) 使用pod hook