【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.添加路由规则 ：路由路径，名字，组件 ：path；访问路由，component:组件

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

 

 

3. 路由重定向

　　1. 在router -> index.js 中新增一个路由规则， 访'/’的时候跳转‘/demo1’：redirect:重定向

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