vue路由基础（加深记忆）

1----vue-router内置组件

router-link

类似于a标签，用于在单页面之间的跳转，默认渲染为a标签

to属性,后面跟着用于跳转的路径tag属性，指定渲染成指定的标签（tab=“p”）router-link-active,自动激活的class名称，当·to·属性的值和地址栏路径相同自动激活该属性。linkActiveClass,自定义属性名称，在路由(reouter)的index.js中修改 const router = new VueRouter({ linkActiveClass:'active', //添加linkActiveClass修改router-link-active成属性名称 routes })

2----页面之间的传值

1.query传值

通过html?id这种写法传值（query传值）

//向/about页面传递值 <div class="na" v-for="(item,index) in list" :key="item.name"> <router-link :to="`/about?${item.id}&{item.name}`"> //&间隔分隔传递的多个值 // 通过?${item.name}将名字传递到/about的浏览栏上 --> {{item.name}} </router-link> </div>

/about页面可以通过this的$route的query获取到传递的值

created(){ //打印出传递的值 console.log(this.$route.query) },

2.动态路由传值

在router路由的index.js文件中创建动态路由

{ //动态路由写法 //path:'/info:tit',单个传递 path:'/info:id/:name',//传递多个值 component:Info }

需要传递值的页面进行传递

<router-link to="/info/这是传递的值1id/这是传递的值2name"> //to="/info:id 单个值传递 跳转动态路由页面 </router-link>

/info页面对传递的值进行接收

created(){ //通过params进行接收 console.log(this.$route.params) }

3----嵌套路由

一个页面中有多个子页面，就是嵌套路由 在注册路由的时候将路由定义children:[子路由]

路由重定向，默认显示xxx路由

{ path: '/', name: 'Home', component: Home, redirect："/name/a", children:[ { path:'a', component:a }, { path:'b', component:b }, { path:'c', component:c } ] },

在主页面调用

<router-link to="/Home/a">a页面</router-link> 跳转a页面 <router-link to="/Home/b">b页面</router-link> 跳转b页面 <router-link to="/Home/c">c页面</router-link> 跳转c页面 <router-view> 标签渲染a/b/c子路由页面 </router-view>

路由别名，声明多个名字也可访问该路由页面

{ path: '/', name: 'Home', //给路由起别名,别名访问也可进去该路由页面 alias:['/home','/home1'] component: Home },

4----对象写法(跳转，传值)

跳转 <router-link :to="{path: '/about'}">about页面</router-link> jquery传值 <router-link :to="{path: '/about',query:{id:6}}">about页面</router-link> 动态路由传值， 并不能直接传值，要将path修改为name，利用name进行传递 <router-link :to="{name: 'about',params:{id:6,name:'张三'}}">about页面</router-link>

{ path: '/about', name: 'about', component: about },

5----$route和$router

$route

this.$route//是当前路由对象，用于获取当前路由里面的属性和方法

$router

this.$router//是所有路由对象可以理解为routes

$router也可以进行页面跳转

//1. this.$router.push('/about') //2. this.$router.push({path: '/about'}) //3.跳转动态路由 this.$router.push({path: '/about/6/张三'}) //4. this.$router.push({name: '/about',params:{id:6,name:'张三'}}) //5.跳转传值 this.$router.push("/about?id=7") //6.跳转(去哪?) $router.go(-1) //7.回退 $router.back() //8.前进 $router.forward() //9.替换当前页面，不留历史记录 $router.replace()