vue2.0路由的基本配置

vue2.0路由的基本配置

本人所用的是vue2.0模版

1. 安装vue-router模块并配置

首先在配置路由之前要安装vue-router

npm install vue-router --save

引入到vue的项目模版当中

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

进行路由入口的配置
下面是我的文档结构

我在src的文件夹下创了一个router的文件夹在里面创建了index.js的文件，
为甚命名为index呢？
因为js优先解析以index命名的文件。
以下是我的index.js的源码

//引入路由模块
import Vue from 'vue'
import Router from 'vue-router'
//使用路由模块
Vue.use(Router)
import Home from '../components/home/Home'
import Login from '../components/login/Login'
import Register from '../components/login/Register'
import Search from '../components/search/Search'
import Detailed from '../components/home/detailedlist/Detailedlist'
import Dlist from '../components/home/detailedlist/Dlist'


export default new Router({
  routes: [
    {path: '/',redirect:'home'},
    {path: '/home', component:Home},
    {path: '/login', component:Login},
    {path: '/register', component:Register},
    {path: '/search', component:Search},
    {path: '/detailedlist',component:Detailed},
    {path: '/dlist',component:Dlist},
  ]

})

以上是路由的配置文件
使用配置路由入口

<template>
<div id="header">
<div class="h_img">
  <img src="../../../static/img/logo.jpg" alt="">
</div>
<div class="h_content"></div>
<div class="h_right">
  <router-link to="/home">分类</router-link>
  <router-link to="/login">登录</router-link>
  <router-link to="/search">搜索</router-link>
</div>
</div>
</template>

<script>
    export default {
        name: "Header"
        }
</script>
<style scoped>
</style>

下面是在App.vue中配置路由的出口

<template>
  <div id="app">
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>

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

<style>
  body,html,#app,section{
    width: 100%;
    height: 100%;
  }
  section .warp{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  section .warp .main{
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
</style>