vue路由基础

vue-router内置组件

页面之间的传值嵌套路由对象写法(跳转，传值)

router-link

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

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

页面之间的传值

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) }

嵌套路由

一个页面中有多个子页面，就是嵌套路由 在注册路由的时候将路由定义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>

对象写法(跳转，传值)

跳转

<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 },