Vue-router路由使用

Vue

1.需要导入vue模块 import Vue from 'vue' 需要导入vue-router模
块 import VueRouter from 'vue-router'

2.导入页面组件

3.vueRouter是vue的一个插件 需要注册插件才能使用 Vue.use(V
ueRouter)

4.hash模式 mode: 'hash' hash模式在路径后面加上#/ 这样浏览器会认为#后面是锚点 不是重新请求新的页面

5.history 通过浏览器的历史记录来 切换路由 history 它只能支持 现代浏览器 vue会自动降级处理 当 history 不支持的时候会制动使用hash模式 谁的子路由 就在谁的组件里切换

---

router 用来处理路由（跳转）的方法集合

$router中常用的方法
//this.$route这个对象用于获取路由的参数数据

1.push 跳转到某个页面 会添加历史记录（因为有历史记录所以可以调用$router.back()方法返回到上一步）

2.replace 也可以跳转到某个页面 但是不会记录历史（因为没有历史记录调用$router.back()方法时不会返回到当前的一步而是会跳转到其他页面）

3. go(-1)

4. back() 返回上一个页面

｀｀｀
// 如果你要使用router 传递参数到目标页面
// 除了使用动态参数以外
// 还可以使用以下的query方式传参 查询字符串参数
// 要使用query 传递查询字符串必须和path一起使用
// this.$router.push({
//     path: '/goods/type1/nz2.html',
//     query: {
//         xx: 100
//     }
// })

// 要直接传递路径参数的方式跳转
// 必须给当前要跳转的路由路径 取一个name 名称
// 然后在配合 params 跳转路径
// this.$router.push('/goods/type1/nz2.html')
// 在push的使用要使用 params传递路径参数 必须配合 路由路径的name属性来使用

this.$router.push({
                    name: 'GoodsDetail',
                    params: {
                        type: 'type1',
                        sid: 'nz2.html'
                    },
                    query: { // 还可以附加 查询字符串参数
                        a: 100
                    }
                })

<router-link to=""></router-link> 类似a标签用于链接跳转

<router-view></router-view>用来作为一个跳转的容器(如果要想在那个页面中跳转就必须在哪个页面写容器)谁的子路由 就在谁的组件里切换

---

watch: { // watch可以监听实例里所有成员的变化
        // 这个路由参数 在第一次加载的时候是检测不了路由的变化的
            $route(v) {
                // console.log(v)
                this.id = v.params.newsid
                this.title = v.params.newsid + '标题'
                // 还可以通过这个新闻id 去后台ajax请求新闻的数据来显示不同的内容
                // 在路径上传递的query参数可以使用$route对象的query属性来获取
            console.log(this.$route.query)
            }
        }

created() {//页面实例化好后执行这个钩子
            // 这个路由参数 在第一次加载的时候是检测不了路由的变化的
            // 第一次加载的路由数据需要通过 vue的生命周期函数函数来获取
            // 预加载
            // $route 用来获取当前页面的路由信息
            this.id = this.$route.params.newsid
            this.title = this.$route.params.newsid + '标题'
            // $router 用来处理路由跳转的方法集合
            // console.log(this.$route)
            // console.log(this.$router)
        } 

导出 export default new VueRouter({
    
    mode: 'history', //路由的处理模式
    routes: [// 路由的匹配规则
        { // 一个对象就是一个匹配规则
            // 要匹配的路径
            path: '/', // http://localhost/
            component: Index //给匹配到的路径提供一个组件
        },
        {
            path: '/news',
            component: News,
            children: [ //子路由
                {
                    path: '/',
                    component: NewsList
                },
                {
                    path: ':newsid',
                    component: Detail
                }
            ]
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/404', //匹配任意路径
            component: NotFound
        },
        {
            path: '*',
            redirect: '/404' //重定向处理
        }
    ]
})

6.要在hash模式和history模式间 兼容的话必须使用router-link to="" 不能使用a标签(a标签在histor模式下支持，但有些浏览器不支持history模式)

动态路由

导航守卫

keep-alive(缓存当前的状态)

---

单页面跳转时使用keep-alive标签包裹想要缓存的元素上时，返回后那个数据将保持不变。