vue项目实战（个人博客）四------vue中组件和路由的使用以及默认路由与路由重定向

vue项目中组件一般在src/components中

在vue中组件一般有两种用法 第一种是直接引用 第二种是通过路由调用

直接引用

导入用使用的组件文件夹，然后声明组建，就可以直接使用了

<template>
  <div id="app">
      <tou></tou>
  </div>
</template>
<script>
import tou from "./components/tou.vue";
export default {
  components: { tou },
  methods: {},
  name: "App",
  data() {
    return {
      btnFlag: false
    };
  },
  
};
</script>

通过路由动态调用

先配置路由信息 路由子啊src/router中

-先在根目录下main.js中引入

import router from './router'

在路由的js文件中引入组件
然后设置page name和component

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
import list from '@/components/list'
import article from '@/components/article'
Vue.use(Router)
export default new Router({
  routes: [
        {
          path: '/list',
          name: 'list',
          component: list  
        } ,    
     },
})

在组件中使用

<template>
  <div id="homepage">
      <div class="left">
        <router-view></router-view>
      </div>
      <router-link to="/list" id="menu_btn" class="target menu_btn">
       </div>
</template>
        

•  <router-view></router-view>代表路由结果显示的位置
  

• to="/list" 要使用的路由page

默认路由和路由重定向

默认路由

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
import list from '@/components/list'
import article from '@/components/article'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
    path: '/',
    redirect:'/homepage',//设置默认只指向的路径
    name:'zhuye'
    },
    {
      path: '/homepage',
      name: 'homepage',//设置默认指向的路径指向的是下面的homepage组件
      component: homepage,
     },
  ],
})

路由重定向
如果我们要让homepage立马加载list组件是就得使用路由重定向

  routes: [
    {
      path: '/homepage',
      name: 'homepage',
      component: homepage,
      redirect:'/list',//设置重定向路由加载的指向路径
      children: [ 
        {
        {
          path: '/list',//设置默认指向的路径指向的是下面的list组件
          name: 'list',
          component: list  
        } ,    
        {
           path: '/articel/:id',
           name: 'articel',
           component: article, 
         }
      ]
     },
  ],