Vue-router

1、根文件：index.html

　　其中的 <div id="app"> 为整个单页的挂载点

2、转接文件：main.js

　　创建Vue并接入vue-router

　　一般为：

　　

import Vue from 'vue'
import App from './App.vue'     //模板文件   
import router from '@/router.js'  //导入编辑router文件
 
import '@assets/css/app.css'      //样式文件
 
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

 3、路由控制文件：router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import home from '@/components/home.vue'
import about from '@/components/about.vue'
import document from '@/components/document.vue'

var router = new Router({
  mode: 'history',
  routes:[
    {
      path:'/home',
      component: home
    },
    {
      path:'/about',
      component: about
    },
    {
      path:'/document',
      component: document
    }
  ]
});



export default router

4、主模板：App.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <div class="nav-box">
      <ul class="nav">
        <li>
          <router-link to="/home">home</router-link>
        </li>
        <li>
          <router-link to="/document">document</router-link>
        </li>
        <li>
          <router-link to="/about">about</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>
<script type="text/javascript">
  export default{
    name:'app'
  }
</script>
<style>
</style>

笔记：

1、一般高版本浏览器，html5支持history的用history模式

2、动态绑定<router-link> ----App.vue  文件中

　

export default{
    name:'app',
    data(){
      return {
        index: '/home'
      }
    }
  }

　　原本：<router-link to="/home" tag="div">home</router-link>

　　直接动态绑定：<router-link :to="index">home</router-link>

　　对象：<router-link :to="{ path:'/home' }">home</router-link>

默认<router-link> 生成的是  <a>  标签，在设置tag="div" 后，生成div标签

<router-link>变为li，<router-link :to="index" tag="li"><i></i><span>home</span></router-link>

3、路由中   router.js

linkActiveClass : 'is-active'　　该属性设置自定义选中class名，如果页面上某个<router-link>被选中，则会加上"is-active"的class样式

此样式在css文件中写，也可以设置行间样式 ==>  active-class="activeClass"    

<router-link :to="{path:'/document'}" active-class="activeClass">document</router-link>  ，其他的<router-link>标签被选中会加上'is-active'样式，这个则会加上 "activeClass"样式

4、<router-link>本身是鼠标点击时进行切换，现改成鼠标移入进行切换

<router-link event="mouseover">

5、如果路由路径未匹配到已有页面

在routes中配置

routes:[{

    path: '*',　　// * 未通配符

    component: noFound　　//404页面（自己写的）

}]

6、重定向

routes:[{

　path: '/home',

   name: 'Home',

   componet: home    //import项

   }{

    path: '*',　　// * 未通配符

    //重定向

　//redirect: '/home'

   //redirect: { path: '/home' }

   //redirect: { name: 'Home' }

   //函数

　redirect: (to) =>{　　//动态设置重定向的目标

　　//目标量路由对象，就是访问的路径的路由信息

　　//console.log(to);

　　//return '/home';

　

　　if( to.path === '/123' ){
　　　　return '/home';
　　}else if(to.path === '/456'){
　　　　return {path : '/document'}
　　}else{
　　　　return {name: 'About'}
　　}

　}

}]