# 佳丽总结：超级详细Vue路由

普通路由

建立路由步骤：

1、先导入 组件类库

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2、创建链接

  <a href="#/aa">AAA</a>|<a href="#/bb">BBB</a>

3、创建链接对应的两个模板

  <template id="aaa">
        <div>
            <p>This is a </p>
        </div>
    </template>
    <template id="bbb">
        <div>
            <p>This is b </p>
        </div>
    </template>

4、注册模板

var a1 = Vue.component('aaa', {
            template: '#aaa'
        });
 var b1 = Vue.component('bbb', {
            template: '#bbb'
        });

5、创建一个router的实例（重要步骤）

注意：这里的path参数的是链接上的地址，而这里的component是接受这个组件的一个变量名，第四步中的var a1=就是注册的这个组件。

6、在app中挂载 router: r,

7、 去显示

嵌套路由

使用children属性实现路由嵌套

因为在实例化一个router的时候，通过routes属性来定义路由的规则，而routes属性中又是由多个对象组成的一个集合。

而chilren一个对象中被嵌套的一个小的对象中的一个集合，通过对象多少，可以嵌套多个。

命名路由

三种方式：

1、普通命名（和路由中功能实现一样，但是不推荐）

<!-- 第一种：普通命名 -->
<a href="#/aa">AAA</a>|<a href="#/bb">BBB</a><br>

2、优先使用（路由中定义好的命名）

 <!-- 第二种  优先使用-->
<router-link to="/aa">AAA</router-link>
<router-link to="/bb">BBB</router-link>

3、脚手架中经常使用的写法

<router-link :to="{name:'x'}">AAAA</router-link>
<router-link :to="{name:'y'}">BBBB</router-link>

和name对应

路由视图

对应关系：

还有一种情况是默认状态下：

路由传参

传参：

运行结果：

路由中的样式

一、设置高亮

1、直接在style中设置

 .router-link-active {
            color: lightblue;
        }

2、要在style中去设置active的样式

.active {
            color: orange;
        }

 linkActiveClass: 'active'

图示：

运行结果：

二、设置过渡效果的动画

（和vue中设置动画的方式一致）

图示：

在脚手架中使用路由

创建脚手架的完整过程：

1、打开命令窗口->找到后输入命令：

vue ui 打开脚手架的管理界面，注意黑框框不能关闭，否则就断开连接了。

浏览器中输入：

​ http://localhost:8000/

管理界面如下：

2、以下创建一个脚手架项目的操作：

打开你后操作：

进入创建：

点击工作区文件夹vueproject->在此创建新的项目

输入项目名称->点击下一步：

在没有重复使用的情况下，暂时选择“手动”->下一步

选择前两项和Router，共三项->下一步

默认选选择“2.X”->"创建项目"

保存预设名称（可以随便起名）->“创建项目”

正在创建，需要一会儿，此时黑框框也在运作。

完成创建，页面跳转到：

然后从编辑器中打开：

打开后：

main.js文件

//此时：默认界面
import Vue from 'vue'//默认界面
import App from './App.vue'//导入根主件，此时是App.vue,如果是root.vue，此时需要进行更换
import router from './router'//导入路由，在路由使用的情况，默认存在

Vue.config.productionTip = false

new Vue({
  router,//默认存在
  render: h => h(App)
}).$mount('#app')

vue文件形式

//组件部分
<template>
      <div>
        //模版内容
      </div>
</template>
//js部分
<script>
 import  组件名   from   '引入路径'
export default {
  name:'App',//组件名称
    //如：子组件名时，嵌套components
  components:{
     // 子组件 1，
     // 子组件 2
  }
}
</script>

//样式部分
<style scoped>//scoped是局部样式

</style>

路由在脚手架中的使用的流程：

一、在main.js文件中导入根模板路径，此时模板路径App.vue->在文件夹component中建立模板子组件，然后再index中创建实例化对象

图示：

二、在index.js中实例化router对象

格式为：

//默认情况下
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '../components/a.vue'
import b from '../components/b.vue'
Vue.use(VueRouter)

const routes = [
 {path:'/x',component:a,
 children:[{path:'/y',component:b}]
} 
]
const router = new VueRouter({
  routes
})

export default router

注意：图示：

脚手架模式（图示）：