vue 004 导航 vue-router

history

• 浏览器提供的接口 里面提供了路由的记录和一个操作路由的方法
• 
• go(n)：n>0 前进N n<0 后退N
• back() ： 后退一页
• forward() ： 前进一页
• pushState(X,X, url) ： 加一条数据到记录中显示到url中 三个参数，url必须同源
• replaceState() ： 替换当前的url

VUE-Router

• 首先引入VUE VUE-Router VUE.use(vue-router) 中间件注册路由
• let router = new Router({}) ：构造函数方式创建router
• new Vue({router:router}) ： 在vue实例中使用vue-router
• 路由默认使用hash的方式导航
• 路由的映射表 路由<->组件
• <router-view></router-view> ： 路由显示的地方
• <router-link to='/sushaod' tag='button'>sushaod</router-link> ：tag可以指定渲染为什么标签

export default new Router({
    //mode:'history'
    routes: [
        {
            path: '/',
            component: () => import('./views/index/index.vue'),
            redirect: '/login',
            children: [
                {
                  path: 'login',
                  component: () => import('./components/login/login.vue')
                },
                {
                  path: 'home',
                  component: () => import('./components/home/home.vue')
                },
            ]
        },
        {    
            path: '/*',
            redirect: '/login',
            //component: () => import('./views/index/index.vue'),
        }
    ],
    linkActiveClass:'active'  //自定义选中样式 .active
})

路由的映射问题

编程式导航vue-router中的导航函数

• this.$router(函数) go(前进&&后退) back(后退) forward(前进) push(添加) replace(替换)
this.$router.push('/sushaod')
• this.$route(属性)

设置路由参数