# 佳丽总结:超级详细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=就是注册的这个组件。

image-20201207170010020

6、在app中挂载 router: r,

image-20201207170242881

7、 去显示

image-20201207170324366

嵌套路由

使用children属性实现路由嵌套

image-20201207171035317

因为在实例化一个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对应

image-20201207172216096

路由视图

对应关系:

image-20201207173402864

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

image-20201207173937760

路由传参

传参:

image-20201207174725055

运行结果:

image-20201207174918665

路由中的样式

一、设置高亮

1、直接在style中设置

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

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

.active {
            color: orange;
        }
 linkActiveClass: 'active'

图示:

image-20201207192041379

运行结果:

image-20201207192308515

二、设置过渡效果的动画

(和vue中设置动画的方式一致)

图示:

image-20201207192200157

在脚手架中使用路由

创建脚手架的完整过程:

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

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

image-20201207180150889

浏览器中输入:

http://localhost:8000/

管理界面如下:

image-20201207180442263

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

打开你后操作:

image-20201207180559316

进入创建:

image-20201207180701443

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

image-20201207180753560

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

image-20201207181033024

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

image-20201207181122685

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

image-20201207181215674

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

image-20201207181249385

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

image-20201207181441294

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

image-20201207181517826

image-20201207181543132

完成创建,页面跳转到:

image-20201207181658575

然后从编辑器中打开:

image-20201207190100116

打开后:

image-20201207190314211

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中创建实例化对象

图示:

image-20201207194947328

二、在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

注意:图示:

image-20201207195725987

脚手架模式(图示):

image-20201207223352839

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1