# 佳丽总结：超级详细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 打开脚手架的管理界面，注意黑框框不能关闭，否则就断开连接了。
浏览器中输入：
管理界面如下：
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
注意：图示：
脚手架模式（图示）：
评论