内置组件( App.vue)
router-link
改变地址栏,改变hash值的
router-view
存放页面
路由配置(/router/index.js)
{path:"/"}:配置的地址
{component:""}
![路由](https://i-blog.csdnimg.cn/blog_migrate/e8a90cf0db73fc724654ad2b8e145462.png#pic_center)
路由配置
普通
{
path:"/user",
name:"user",
component:()=>import(xxx)
}
传参
{
path:"/produce/:id",
name:"",
component:()=>import(xxx)
}
子路由
{path:"/admin",
name:"admin",
component:()=>import(xxx)
children:[
{path:"dash",component:yyy},
{path:"dash",component:zzz},
{path:'',redirect:'dash'}
]
}
404
1. 配置在最后面
2. path值为*
{
path:"*",
component:NoMatch
}
路由的别名
{
path:"/",
alias:["/index","/main"]
}
$route( 当前路由信息)
name 名称
params 路由参数
path 路径
fullPath 全路径
query 查询参数
hash 哈希
meta 元信息
路由组件
router-link 切换路由
to属性 改变地址栏
to="/user"
:to="/user"
:to="{name:'user',parame:{},query:{}}"
:to="{path:'/produce/123'}"
router-view 存放路由
router-link
to 跳转
编程跳转($router)
.push("/")跳转并添加一个历史记录
.replace("/")跳转替换(不留当前历史记录)
.back()返回
.forward()前进
.go(-1)返回一步
.go(1) 前进一步