vue-router是一个插件包,要先用npm进行安装
1,安装vue-router
npm安装vue-router
纱添加vue-router
2,引入注册vue-router
从“Vue”进口Vue
从“vue-router”进口VueRouter
Vue.use (VueRouter)
之前
3,链接跳转
& lt; router-link='/home '祝辞& lt;/router-link>//你可以在模板中使用它实现一个可点击跳转到家里。vue的一个标签
美元。router.push ('/');//在方法方法中跳转到对页面
美元。router.go (' 1 ');//在js中返回上一个页面
4,经常用到
route.params.name美元。//在js中获取路由的参数
.router-link-active//当前选中路由的匹配样式
美元的路线。//查询获取查询参数
美元的路线。散列//哈希
5,路由配置
出口默认新路由器({
路线:[
{//第一层是顶层路,由顶层路由中的router-view中显示被router-link选中的子路由
路径:“/?
名称:“回家”,
组件:‘回家’
}，{
路径:/user/: id,//www.xxx.com/user/cai//名称:“用户”:id是动态路径参数
组件:“用户”,
孩子:(
{
路径:“用户信息”,//www.xxx.com/user/cai/userInfo
组件:“用户信息”//子路由将渲染到父组件的router-view中
}，{
路径:“文章”,
组件:“文章”
}
]
}
]
})
Vue.use(路由器);
之前
6路由参数方式变化时,重新发出请求并更新数据
//比如:用户一切换到用户二,路由参数改变了,但组件是同一个,会被复用//从/user/cai切到/user/广域网
之前
在用户组件中:
//方法1:
看:{
“美元路线”(从){//做点什么,比如:更新数据
}
}//方法二:
beforeRouteUpdate(下),从{//同上
}
之前
7编程式导航
router.push ({name:‘用户’,参数:{标识:“123 '}})//命名路由导航到用户组件
& lt; router-link:='{名称:“用户”,参数:{userId: ' 123 '}}的祝辞用户& lt;/router-link>
router.push({路径:“登记”,查询:{计划:“蔡”}})//查询查询参数
router.push({路径:/user/$ {userId} '})//查询
router.push(位置、onComplete onAbort)
router.replace()//替换
router.go (1)
之前
8,命名视图
//当前组件中只有一个router-view时,子组件默认渲染到这里
& lt; router-view类=稀４? lt;/router-view>
& lt; router-view类=a name=蟆４? lt;/router-view>
& lt; router-view类=' b ' name='主'祝辞& lt;/router-view>
路线:[
{
路径:“/?
组件:{
默认值:头,
左:导航,
主要:内容//组件会渲染在名称为主要的router-view中
}
}
]//嵌套命名视图就是:子路由+命名视图
之前
9日重定向与别名
const路由器=new VueRouter ({
路线:[
{路径:“/?重定向:“/b”},
{路径:/b,重定向:{名称:“foo”}},//命名路由方式
{路径:/c,重定向:=比;{//动态返回重定向目标//方法接收目标路由作为参数//返回重定向的字符串路径/路径对象
}}
]
})
const路由器=new VueRouter ({
路线:[
{路径:“/?组件:一个,别名:“/b”}//别名:当访问/b时也会使用一组件
]
})
之前
10路由组件传参
const用户={
道具:“id”,
模板:“& lt; div> {{id}} & lt;/div>”
}
const路由器=new VueRouter ({
路线:[
{路径:/user/: id,组件:用户、道具:真正的},//对于包含命名视图的路由,你必须分别为每个命名视图添加“道具”选项:
{
路径:/user/: id,
组件:{默认值:用户、侧边栏:栏},
道具:{默认值:真,侧边栏:假}
}
]
})
之前
11, HTML5的历史模式下服务端配置
const路由器=new VueRouter ({
模式:“历史”,
路线:[
{路径:‘*’,组件:404}
]
})
