Vue初级_03

于 2018-12-09 15:55:52 发布
阅读量165 收藏
点赞数
分类专栏： Vue 文章标签： Vue router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32054169/article/details/84918438
版权

路由原理

  • 传统开发方式,url改变后立刻发起请求,响应整个页面,渲染整个页面
  • SPA锚点值改变后,,不会发起请求,发起ajax请求,局部改变页面数据,页面不跳转,用户体验更好

SPA

  • single page application(单页面应用程序)
  • 前端路由

锚点值监视

ajax获取动态数据

核心是锚点值

  • 前端页面Vue/angular/react都适合开发单页应用

基本使用

  • vue-router
  • 其是Vue的核心插件
  • 下载 npm i vue-router -s

  • 1:引入vue-router(核心插件)对象

  • 2:创建一个路由对象

  • 3:配置路由对象

  • 4:安装插件=>?Vue.use(VueRouter)

  • 5:将配置好的路由对象关联到Vue实例中

  • 6:留坑,使用组件

router-link

  • to
  • 帮助我们生成a标签的href
  • 锚点至代码维护不方便,如果需要改变锚点至名称,则需要改变(使用次数+1(配置规则))个地方的代码

命名路由

  • 1:给路由对象一个名称{name:'home',path:'/home',component:Home}
  • 2:在router-link的to属性中描述这个规则.<router-link :to="name:'home'"></router-link>通过名称找路由对象,获取其path,生成自己的href
  • 大大降低维护成本,锚点值改变只要在main.js中改变path属性即可

​​​​​​​生僻API

  • Vue.use(插件对象); //过程中会注册一些全局组件,及给VM或者组件对象挂载属性
  • 给VM及组件对象挂载的方式:Object.defineProperty(Vue.prototype,'$router',{
  •     get:function(){
  •          return 自己的router对象    
  • }
  • ​​​​​​​})

参数router-link

  • Vue.prototype.xxx={add:fn}
  • 所有组件中,使用this.xxx就能拿到这个对象
  • 查询字符串​​​​​​​
  1. ​​​​​​​配置 :to="{name:'detail',query:{id:hero.id}}"
  2. 规则 {name:'detail',path:'/detail',component:Detail}
  3. 获取this.$toute.query.id
  4. 生成<a href="/detail?id=1">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 1:引入vue-router(核心插件)对象 -->
    <script src="./vue-router.js"></script>
    <script>
    var Login={
        template:`
        <div>我是登录页面</div>
        `
    };
    var Register={
        template:`
        <div>我是注册页面</div>
        `
    };

    //2:创建一个路由对象
    //console.log(VueRouter);
    var router=new VueRouter({
         //3:配置路由对象
         routes:[
             //路由对象有了名称就等于有了变量名,router-link只需说明这个变量名就可以
             {name:'login',path:'/login',component:Login},
             {name:'register',path:'/register',component:Register}
             ]
    });
   
    //4:安装插件=>?
    Vue.use(VueRouter);

    var App={
        template:`
            <div>
                <!--vue-router内置组件
                <router-link to="/login">登录</router-link>
                <router-link to="/login">登录</router-link>
                <router-link to="/login">登录</router-link>
                <router-link to="/register">注册</router-link>
                -->
                <router-view>注册</router-view>

                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'register'}">注册</router-link>
                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'register'}">注册</router-link>
                <router-link :to="{name:'login'}">登录</router-link>
            </div>
        `,
    };
    //5:将配置好的路由对象关联到Vue实例中
    new Vue({
        el:'#app',
        components:{
            app:App,
        },
        template:`<app/>`,
        //不加这一步,会导致运行的时候说undefined对象中取不到matched
        router:router,
    });
    //6:指定路由改变局部的位置
    </script>
</body>
</html>

参数的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 1:引入vue-router(核心插件)对象 -->
    <script src="./vue-router.js"></script>
    <script>
    var Login={
        template:`
        <div>我是登录页面</div>
        `,
        created:function(){
            console.log(this.$route.query);
        },
    };
    var Register={
        template:`
        <div>我是注册页面</div>
        `,
        created:function(){
            console.log(this.$route.params);
        },
    };

    //2:创建一个路由对象
    //console.log(VueRouter);
    var router=new VueRouter({
         //3:配置路由对象
         routes:[
             //路由对象有了名称就等于有了变量名,router-link只需说明这个变量名就可以
             {name:'login',path:'/login',component:Login},
             {name:'register',path:'/register/:name',component:Register}
             ]
    });
   
    //4:安装插件=>?
    Vue.use(VueRouter);

    var App={
        template:`
            <div>
                <router-link :to="{name:'login',query:{id:1}}">登录</router-link>
                <router-link :to="{name:'register',params:{name:'abc'}}">注册</router-link>
            </div>
        `,
    };
    //5:将配置好的路由对象关联到Vue实例中
    new Vue({
        el:'#app',
        components:{
            app:App,
        },
        template:`<app/>`,
        //不加这一步,会导致运行的时候说undefined对象中取不到matched
        router:router,
    });
    //6:指定路由改变局部的位置
    </script>
</body>
</html>

 

​​​​​​​vue-router中的对象

  • $route路由信息对象,只读对象
  • $router路由操作对象,只写对象

嵌套路由

  • 市面上所谓的用单页面应用框架开发多页应用
  • 嵌套路由
  • 案例:进入我的主页显示:电影,歌曲
  • 代码思想:
  1. router-view的细分   router-view第一层中,包含一个router-view
  2. 每一个坑挖好了,要对应单独的组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 1:引入vue-router(核心插件)对象 -->
    <script src="./vue-router.js"></script>
    <script>
    var Woman={
        template:`
            <div>
                欢迎女士登录...
            </div>
        `
    };
    var Man={
        template:`
            <div>
                欢迎男士登录...
            </div>
        `
    };
    //1:router-view中包含router-view
    //2:路由规则中存在子路由
    var Login={
        template:`
        <div>
            我是login显示的内容,下面是子路由显示的内容
            <router-view></router-view>
        </div>
        `,
        created:function(){
            //console.log(this.$route.query);
        },
    };
    var Register={
        template:`
        <div>
                我是register显示的内容,下面是子路由显示的内容
            <router-view></router-view>
        </div>
        `,
        created:function(){
            console.log(this.$route.params);
        },
    };

    //2:创建一个路由对象
    //console.log(VueRouter);
    var router=new VueRouter({
         //3:配置路由对象
         routes:[
             //路由对象有了名称就等于有了变量名,router-link只需说明这个变量名就可以
             
             {  //保证/login显示login组件
                 name:'login',
                 path:'/login',
                 component:Login,
                 //保证/login/abc显示abc
                 children:[
                     {
                        name:'login.woman',
                        path:'woman',
                        component:Woman,
                     },
                     {
                        name:'login.man',
                        path:'man',
                        component:Man,
                     }
                 ],
                 },
             {name:'register',
             path:'/register/:name',
             component:Register
             }
             ]
    });
   
    //4:安装插件=>?
    Vue.use(VueRouter);

    var App={
        template:`
            <div>
                <router-link :to="{name:'login.woman'}">去女性登录点</router-link>
                <router-link :to="{name:'login.man'}">去男性登录点</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    //5:将配置好的路由对象关联到Vue实例中
    new Vue({
        el:'#app',
        components:{
            app:App,
        },
        template:`<app/>`,
        //不加这一步,会导致运行的时候说undefined对象中取不到matched
        router:router,
    });
    //6:指定路由改变局部的位置
    </script>
</body>
</html>

mete和全局路由前的渲染事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 1:引入vue-router(核心插件)对象 -->
    <script src="./vue-router.js"></script>
    <script>
    //1:router-view中包含router-view
    //2:路由规则中存在子路由
    var isLogin=false;
    var Login={
        template:`
        <div>
            我是登录页面
            <router-view></router-view>
        </div>
        `,
        created:function(){
            isLogin=true;
        }
    };
    var Music={
        template:`
        <div>
            我的音乐页面
        </div>
        `,
    };

    //2:创建一个路由对象
    //console.log(VueRouter);
    var router=new VueRouter();
    //可以多次的追加路由规则,动态的获取路由规则
    router.addRoutes([
        //默认首页路由
        {path:'/',redirect:{name:'login'}},
        {  //保证/login显示login组件
            name:'login',
            path:'/login',
            component:Login,
        },
        {
            name:'music',
            path:'/music',
            component:Music,
            //meta:{isChecked:true}给未来路由的权限控制..全局路由守卫 来做参照条件
            meta:{
                isChecked:true
            },
        }
    ]);
    router.beforeEach(function(to,from,next){
        if(!to.meta.isChecked){
        //if(to.name==='login'||to.path==='/'){
            next();//不调用next就会卡住
        }else{
           if(isLogin){
               next();  //放行
               //取消用户导航行为
           }else{
               alert("请先登录");
               //重定向 /login
               next({name:'login'});
           }
        }
    });
   
    //4:安装插件=>?
    Vue.use(VueRouter);

    var App={
        template:`
            <div>
                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'music'}">我的音乐</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    //5:将配置好的路由对象关联到Vue实例中
    new Vue({
        el:'#app',
        components:{
            app:App,
        },
        template:`<app/>`,
        //不加这一步,会导致运行的时候说undefined对象中取不到matched
        router:router,
    });
    //6:指定路由改变局部的位置
    </script>
</body>
</html>

 

追涨杀跌的小韭菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值