Vue-Router学习__Part01

最新推荐文章于 2023-05-22 14:34:58 发布

Mark Huo

最新推荐文章于 2023-05-22 14:34:58 发布

阅读量79

点赞数

分类专栏： Vue

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

$refs的使用

  var App2 = {
        template: `<div>
                        <h1>我是App2</h1>
                        <button ref="btn">按钮3</button>
                    </div>`,
    }
    // 注册
    var App = {
        template: `<div>
                        <h1>我是App</h1>
                        <button ref="btn">按钮1</button>
                        <App2 ref="ap2"></App2>
                    </div>`,
        components:{
            App2
        },
        mounted(){
            // 如果给标签绑定ref="xxx"，可以使用this.$refs.xxx获取原生的domjs对象
            console.log(this.$refs.btn)
            // 如果给组件绑定ref="xxx"，可以使用this.$refs.xxx获取这个组件对象
            console.log(this.$refs.ap2)
        }
    }

$nextTick

在dom更新之后refs没法获取到dom更新之后的元素，因此提供了nextTick方法

 // 注册
    var App = {
        data(){
          return{
              isShow:false
          }
        },
        template: `<div>
                        <h1>我是App</h1>
                        <button ref="btn">按钮1</button>
                        <App2 ref="ap2"></App2>
                        <input type="text" v-show="isShow" ref="input">
                    </div>`,
        components:{
            App2
        },
        mounted(){
            
            // 如果给标签绑定ref="xxx"，可以使用this.$refs.xxx获取原生的domjs对象
            console.log(this.$refs.btn)
            // 如果给组件绑定ref="xxx"，可以使用this.$refs.xxx获取这个组件对象
            console.log(this.$refs.ap2)

            this.isShow = true
            //在dom更新循环结束后的执行的回调函数，
            // 在修改数据之后使用此方法在回调中获取更新后的dom
            this.$nextTick(()=>{
                    console.log(this)
                    this.$refs.input.focus()
                }
            )
        }
    }

使用vue-Router

原生JS的调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>

    <div id="app"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('app')

        // 监控hash值的变化
        window.onhashchange = function () {
            console.log(location.hash)
            switch (location.hash) {
                case '#/login':
                    oDiv.innerHTML = '<h2>我是登录页面</h2>'
                    break
                case '#/register':
                    oDiv.innerHTML = '<h2>我是注册页面</h2>'
                    break
                default:
                    break
            }
        }

    </script>
</body>
</html>

使用路由简单实现（锚点跳转）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
<div id="app" >
    <App></App>
</div>

<script>
    //让vue使用vue-router
    Vue.use(VueRouter)

    //创建Login对象
    var Login = {
        template: `
            <h2>我是登录页面</h2>
        `
    }

    //创建Register对象
    var Register = {
        template: `
            <h2>我是注册页面</h2>
        `
    }

    //创建vue-router对象
    var router = new VueRouter({
        //配置路由
        routes:[
            //路由匹配规则,路径加子组件名
            {
                path:"/login",
                component:Login,
            },
            {
                path:"/register",
                component:Register,
            }
        ]
    })

    // 使用router-link 他最终会被渲染成a标签
    // router-view 相当于一个占位符，用于展示被匹配路径匹配到的组件中的内容(路由组件的出口)
    var App = {
        template: `<div>
                         <router-link to="/login">登录</router-link>
                         <router-link to="/register">注册</router-link>
                         <router-view></router-view>
                    </div>`,
    }

    // 创建根实例
    new Vue({
        el: '#app',
        data:{
            messagec:'我是祖父组件的数据',
        },
        components: {
            App
        },
        //吧router交给根组件管理
        router:router
        // template:`<App message="hello" :texts="messagec" @getHeaderData="getDataMethod"></App>`
    })
</script>
</body>
</html>

步骤

1.引入并注册vueRouter

    <script src="../vue-router.js"></script>

    //让vue使用vue-router
    Vue.use(VueRouter)

2.创建App和2个子组件
3.创建router对象，使用路由进行关联

    //创建vue-router对象
    var router = new VueRouter({
        //配置路由
        routes:[
            //路由匹配规则,路径加子组件名
            {
                path:"/login",
                component:Login,
            },
            {
                path:"/register",
                component:Register,
            }
        ]
    })

4.在App中使用router-link和router-view

    // 使用router-link 他最终会被渲染成a标签
    // router-view 相当于一个占位符，用于展示被匹配路径匹配到的组件中的内容(路由组件的出口)
    var App = {
        template: `<div>
                         <router-link to="/login">登录</router-link>
                         <router-link to="/register">注册</router-link>
                         <router-view></router-view>
                    </div>`,
    }

命名路由

路由加名字，to变属性:to，参数传字典

    //路由匹配规则,路径加子组件名
            {
                path:"/login",
                name:"login",
                component:Login,
            },
        
     <router-link :to="{name:'login'}">登录</router-link>

路由传参

路由范式

xxxx.html#/user/1 params 动态路由参数
oooo.html#/user?userId=1 query

路由

//创建vue-router对象
    var router = new VueRouter({
        //配置路由
        routes:[
            //路由匹配规则,路径加子组件名
            //动态路由参数，以:开头
            {
                path:"/login/:id",
                name:"login",
                component:Login,
            },
            {
                path:"/register",
                name:"register",
                component:Register,
            }
        ]
    })

匹配

  // 使用router-link 他最终会被渲染成a标签
    // router-view 相当于一个占位符，用于展示被匹配路径匹配到的组件中的内容(路由组件的出口)
    var App = {
        template: `<div>
                         <router-link :to="{name:'login',params:{id:1}}">登录</router-link>
                         <router-link :to="{path:'/register',query:{userId:2}}">注册</router-link>
                         <router-view></router-view>
                    </div>`,
    }

子组件获取路由参数

使用$router获取路由参数

   //创建Login对象
    var Login = {
        template: `
            <h2>我是登录页面</h2>
        `,
        created(){
            // 当引入vuerouter后，会将这2个对象挂载到根部vue实例化对象中
            // 而组件具有继承性，所有这个组件也能拿到这2个对象
            console.log(this.$router) //vuerouter对象
            console.log(this.$route) //创建的routes路由
            console.log(this.$route.params.id) //创建的routes路由
        }
    }

    //创建Register对象
    var Register = {
        template: `
            <h2>我是注册页面</h2>
        `,
        created(){
            // 当引入vuerouter后，会将这2个对象挂载到根部vue实例化对象中
            // 而组件具有继承性，所有这个组件也能拿到这2个对象
            console.log(this.$router) //vuerouter对象
            console.log(this.$route) //创建的routes路由
            console.log(this.$route.query.userId) //创建的routes路由
        }
    }

路由嵌套

一个router-view中嵌套另一个router-view

登录路由中

{
                path:"/login/:id",
                name:"login",
                component:Login,
                children:[
                    {
                        path:"main",
                        name:"main",
                        component:Main,
                    },
                    {
                        path:"main2",
                        name:"main2",
                        component:Main2,
                    }
                ]
            },

登录vue对象中

    //创建Login对象
    var Login = {
        template: `
            <div>
                    <h2>我是登录页面</h2>
                    <router-link to="/login/1/main">主页1</router-link>
                    <router-link :to="{name:'main2',params:{id:1}}">主页2</router-link>
                    <router-view></router-view>
<!--                    <Main></Main>-->
            </div>
        `,
        created(){
            // 当引入vuerouter后，会将这2个对象挂载到根部vue实例化对象中
            // 而组件具有继承性，所有这个组件也能拿到这2个对象
            console.log(this.$router) //vuerouter对象
            console.log(this.$route) //创建的routes路由
            console.log(this.$route.params.id) //创建的routes路由
        },
        components:{
            Main,
            Main2
        }
    }

创建2个子路由模板

    //创建Main对象
    var Main = {
        template: `
            <h2>我是主页面1</h2>
        `,
        created(){
            // 当引入vuerouter后，会将这2个对象挂载到根部vue实例化对象中
            // 而组件具有继承性，所有这个组件也能拿到这2个对象
            console.log('main1-----------')
            console.log(this.$router) //vuerouter对象
            console.log(this.$route) //创建的routes路由
            // console.log(this.$route.query.userId) //创建的routes路由
        }
    }

    //创建Main对象
    var Main2 = {
        template: `
            <h2>我是主页面2</h2>
        `,
        created(){
            // 当引入vuerouter后，会将这2个对象挂载到根部vue实例化对象中
            // 而组件具有继承性，所有这个组件也能拿到这2个对象
            console.log('main2-----------')
            console.log(this.$router) //vuerouter对象
            console.log(this.$route) //创建的routes路由
            // console.log(this.$route.query.userId) //创建的routes路由
        }
    }

注意：会在加载时默认匹配path中的第一个路由

Mark Huo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Router学习__Part01

$refs的使用 var App2 = { template: `<div> <h1>我是App2</h1> <button ref="btn">按钮3</button> </d...
复制链接

扫一扫