[JavaScript知识库]VUE路由入门案例

后端路由

??对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由

??对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点: HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。

Router-view

• 比如锚点，baidu.com#123,url后面带了#的不会跳转。

• 定义路由：

const router = new VueRouter({ 
	routes:[]
})

• 在vue实例中加router，属性与名称一直，可简写，只写一个。

步骤:

1. 导入vue.js
2. 导入vue-route.js
3. 创建路由对象const routerObj = new VueRouter({ })
4. 定义路由规则 {path: ‘/login’,component: login},
5. 占位符匹配组件<router-view></router-view>
   示例代码

<div id="app">
        <!--  vue-router提供的元素，当作占位符。匹配组件 -->
        <router-view></router-view>
    </div>

    <script>
        let login={
            template:'<h1> 登录组件</h1>'
        }
        let register={
            template:'<h1> 注册组件</h1>'
        }

        //路由对象,new的时候为构造函数传递一个配置对象
        let routerObj = new VueRouter({
            //路由匹配规则
            routes: [
                // 每个路由规则，都是一个对象，这个规则对象，有两个必须的属性
                //属性1 是path表示监听路由地址，
                //属性2 是component表示，如果路由前面匹配到的path，则展示属性对应的那个组件
               //注意component的属性名称必须是一个组件的模板对象
                {path: '/login',component: login},
                {path: '/register',component: register}
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            //将路由规则对象注册到vm实例上，用来监听URL地址的变化
            router: routerObj
        });
    </script>

Router-link

??默认渲染为一个a标签,渲染标签为 tag=“span”

Redirect

??默认显示的根路径没有东西，所以使用Redirect重定向指定组件。
{path: ‘/’,redirect: ‘/login’},

路由高亮的两种方法

1. router-link提供了一个类，默认是router-link-active
   它会渲染当前router-link的标签，给它设置样式即可
2. 使用构造器linkActiveClass自定义类名

路由切换动画

1. <transition mode = “out-in”> </transition>

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }

路由传参

1. query方式。（好处是不需要修改路由规则）

• 如果在路由中使用查询字符串，给路由传递参数，则不需要修改路由规则path属性

<router-link to="/login?id=10">登录</router-link>

       <router-link to="/login?id=10">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

    <script>
        const login = {
            template:'<h1>登录 --- {{ $route.query.id }}</h1>',
            created() {  //钩子函数，组建的生命周期
                // console.log(this.$route.query.id);
            },
        }

2. params方式

<router-link to="/login/12 ">登录</router-link>
{ path: '/login/:id', component:login },

路由的嵌套

使用children属性添加子路由
组件里也要写

路由命名视图

命名视图的名称是字符串
Path属性使用components，而不是之前的component
笔记：vue代码一般加单引号，h5代码一般加双引号

  path: '/', components: {
                        'default':header,
                        'left': leftBox,
                        'main': mainBox
                }},

        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>

监听文本框

1. @keyup监控文本框值得改变，通过v-model同步
2. vue的watch属性，可以监视指定数据的变化，然后触发这个watch中对应的函数

区别：
Watch监听代码量更多，当我们需要监听看不见的元素@keyup就无法监听。比如路由的监听。

3. computed方式

   computed:{
                'fullname': function(){
                    return this.firstname + this.lastname
                }
            }

监听路由地址

           watch:{
                '$route.path':function(newVal, oldVal){
                    if(newVal==='/login'){
                        console.log("欢迎登录");
                    }else{
                        console.log('欢迎注册');
                    }
                }
            }

三种监听方式的对比
Methods
??表示一个具体的操作，侧重于书写业务逻辑

computed 计算属性
??属性的结果会缓存，除非依赖响应式属性变化才会重新计算，主要当作属性使用

watch
??是一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,计算属性必须return一个值，可以看作是computed和methods的结合体。