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
})
通过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)
},
在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:[子路由]
{
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
},
跳转
jquery传值
动态路由传值,
并不能直接传值,要将path修改为name,利用name进行传递
{
path: '/about',
name: 'about',
component: about
},
$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()