vue-router路由——路由、路由的基本使用 、多级路由 、路由的配置、编程式路由跳转 $router 、路由信息 $route、路由守卫、路由元信息、路由查询参数

 一:路由是什么

• 路由就是路径和组件的映射关系。
• 在一个页面里, 切换业务场景
• 单页面 SPA(single page web application) 应用
• 整个应用只有一个完整的页面
• 点击页面中的导航链接不会刷新页面 ，只会做页面的局部更新
• 数据需要通过ajax请求获取

 二:路由的基本使用方法

安装vue-router,命令     npm i vue-router     (如果手动创建脚手架并勾选安装了router组件,则无需在安装)

应用插件：Vue.use(VueRouter)

router组件配置

<router-link  to="/切换的路由的地址">
切换路由:跳转到指定路径的页面(router-link 在实际页面中会渲染成a标签)
例:<router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/123',query:{age:18},hash:'best'}">产品</router-link>
query可以传递需要的参数 ,hash表示哈希值

 <router-view>
存放路由:通过router-link 的切换将router-view显示或隐藏,默认是被销毁掉的，需要的时候在挂载

 router配置        /router/index.js
一般配置
{
  path:"/user",
  name:"user",
  component:()=>import(xxx)
}
传参配置
{
  path:"/product/:id",(这里的id与上文的123对应)
  name:"product",
  component:xxx
}
传参在页面中获取:$route.params.id

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

如果想给未定义路由的页面配置一个页面
{
   path:"*"
}  一定要配置在最后面

三:多级路由

 routes:[
        {
           path:'/about',
           component:About
        },
        {
            path:'/home',
            component:Home,
            // 二级路由
            children:[
                {
                //这里不用加/
                path:'news',
                component:News,
                },
                {
                //这里不用加/
                path:'message',
                component:Message,
                }
            ]
        }

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>要去的二级路由页面

 四:编程式路由跳转 $router

• 前进   forward()    go(1)
• 后退   go(-1)    back()
• 切换路由    push("/about")
• 替换路由    replace("/about") (不留当前页面历史记录) 强制返回的话跳转到首页
  
  自定义跳转的层级 $router.go(层数),前提是去往的页面存在