路由vue-router

2019-04-01 本文已影响0人没了提心吊胆的稗子

前后端分离，后端只负责提供接口供前端使用，页面跳转都是前端自己实现，有两种方式：
1、hash模式# 开发时使用，不会导致404问题，不支持seo
2、h5的history.pushState 上线采用
路由四部曲：
1、映射表：配置路径匹配哪个组件，这里的组件都是页面级组件
2、映射表注册：在VueRouter的实例里面注册
3、路由注册：在当前vm实例上注册
4、渲染：注册完之后要把组件的内容渲染到页面中，通过<router-view></router-view>
<router-link to="/home" tag="button">首页</router-link>跳转页面，不设置mode属性指定history方式就会默认使用hash。history方式要设置默认页面。tag属性表示想要这个标签以什么方式出现在页面上，此处是按钮，默认是超链接

<body>
<div id="app">
    <!-- vue自带的全局组件 注册完组件之后把内容渲染到页面-->
    <!--4、把内容渲染到页面-->
    <router-view></router-view>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<!--必须放在vue后面-->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {template: '<div>首页</div>'};
    let list = {template: '<div>列表</div>'};
    let routes = [ //1、 映射表（数组） 页面级组件 一个页面就是一个组件
        {path: '/home', component: home},
        {path: '/list', component: list}
    ];
    let router = new VueRouter({ // 引入vue-router自带VueRouter类
        // 2、映射表注册
        routes
    });
    let vm = new Vue({
        el: '#app',
        // 3、路由注册
        router,
    });
</script>
</body>

路由的编程式导航，在js中跳转页面，每个组件都会有 $router(存方法)$ route(存属性)两个属性

let home = {
        template: '<div>home<button @click="toList">去列表</button></div>',
        methods: {
            toList() {
                this.$router.push('/list');  // 强制跳转路径
                //this.$router.replace('/list'); // 路由替换，会把当前的替换掉
            }
        }
};
let list = {
        template: '<div>list<button @click="toHome">去首页</button></div>',
        methods: {
            toHome() {
                this.$router.go(-1); // 返回上一级
                // this.$router.back(); // 返回上一级 一样的
            }
        }
};
let routes = [
        {path: '', component: home}, // 默认展示页面
        {path: '/home', component: home},
        {path: '/list', component: list},
        // {path: '*', component: home},// 都匹配不到的时候
        {path: '*', redirect: '/home'} // 组件也要切换 404的时候
    ];

路由嵌套

{
    path: '/detail',
    component: detail,
    children: [// 子路由的路径不能写/带/表示一级路由
         {path: 'profile', component: profile},
         {path: 'about', component: about}
    ]
}

路由传参方式1：直接传递

let article = {template: '<div>第{{this.$route.params.c}}篇文章</div>'};
let routes = [
   {
        // /article/1
        // /article/:c => {C: 1}=this.$route.params.c
        path: '/article/:c', // 表示必须有值但值是随机的
        component: article
   }
];

方式2：使用对象作为to的属性并且使用参数，这种方法要求必须给路由起个名字，通过名字跳转，路径变化时用watch监听来发送ajax

<router-link :to="{name: 'pro', params: {c: 1}}">商品1</router-link>
<script>
  let article = {
        template: '<div>第{{this.$route.params.c}}篇文章</div>',
        watch: { // 路径参数发生变化 监控参数的变化发送ajax
            $route(){
                alert('发送ajax');
            }
        }
    };
  let routes = [
        {
            path: '/article/:c', // 表示必须有值但值是随机的，
            name: 'pro',
            component: article
        }
  ];
</script>

改了好久才发现是因为没有渲染

<router-view></router-view>

都是粗心惹的祸

路由vue-router

猜你喜欢

热点阅读