zoukankan html css js c++ java

Vue学习笔记4--vue-router路由

vue-router前端路由

完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ

路由的基本概念

本质

路由本质是对应关系

路由分类

后端路由

概念：根据用户的URL请求返回不同内容
本质：URL请求地址与服务器资源之间的对应关系

前端路由

概念：根据不用的用户事件，显示不用的页面内容
本质：用户事件和事件处理函数之间的对应关系

实现简单的前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

window.onhashchange = function(){
    console.log(location.hash);
}

Demo

<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        
        <!-- 组件占位符 -->
        <component :is="comName"></component>
    </div>
    <script>
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }
        const keji = {
            template: '<h1>科技信息</h1>'
        }
        const caijing = {
            template: '<h1>财经信息</h1>'
        }
        const yule = {
            template: '<h1>娱乐信息</h1>'
        } 
        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'zhuye'
            },
            components: {
                zhuye,
                keji,
                caijing,
                yule
            }

        });
		
        //监听页面hash值的变化
        window.onhashchange = function(){
            vm.comName = location.hash.slice(2);
        }
         
    </script>
</body>

vue-router的基本使用

Vue.js官方的路由器，和Vue.js核心深度集成

功能

支持H5的历史模式和hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

使用步骤

引入相关库文件

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

添加路由链接

<!-- router-link 默认渲染为a标签 -->
<!-- to 属性渲染为href -->
<!-- to 属性的值渲染为#开头的hash地址 -->
<router-link to="/user">User</router-link>

添加路由填充位

<!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>

定义路由组件

var User = {
    template: '<h1>User</h1>'
}
var Register = {
    template: '<h1>Register</h1>'
}

配置路由规则并创建路由实例

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

把路由挂载到Vue实例中

const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 对应一致时可以简写
    router

});

路由重定向

用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定页面

默认进入页面地址为：http://127.0.0.1:5500/index.html#/

希望进入: http://127.0.0.1:5500/index.html#/user

使用redirect属性配置

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

vue-router嵌套路由

分析

点击父级路由链接显示模板内容
模板内容内容中又有自己路由链接
点击子级路由链接显示子级模板内容

步骤

创建父级路由链接和父级路由填充位

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

<!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>

定义路由组件

var User = {
    template: '<h1>User 组件</h1>'
}
var Register = {
    template:  `
            <div>
            	<h1>Register 组件</h1>
            	<hr/>
            	<router-link to="/register/tab1">Tab1</router-link>
            	<router-link to="/register/tab2">Tab2</router-link>

            	<!-- 子路由填充位 -->
            	<router-view></router-view>
            </div>`
}
var Tab1 = {
    template: '<h2>Tab1</h2>'
}
var Tab2 = {
    template: '<h2>Tab1</h2>'
}

嵌套路由配置

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {
            path: '/register',
         	component: Register,
         	//嵌套子路由
         	children: [
                 {path: '/register/tab1',component: Tab1},
                 {path: '/register/tab2',component: Tab2}
         	]
        }
    ]
})

Vue实例中挂载router

const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 对应一致时可以简写
    router

});

vue-router动态匹配路由

基本用法

 const router1 = new VueRouter({
     routers: [
         //动态路由路径参数 冒号开头
         {path: '/user/:id',component: User}
     ]
 })

组件中获取id值

const User = {
    //通过 $route.params 获取参数
    template: '<div>User {{ $route.params.id }}</div>'
}

Demo

路由链接和路由填充位

<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

<!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>

组件

const User = {
    //通过 $route.params 获取参数
    template: '<div>User {{$route.params.id}} 组件</div>'
}

定义路由实例

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User},
    ]
})

Vue实例中挂载router

const vm = new Vue({
    el: '#app',
    data: {

    },
    //配置
    //router: router 对应一致时可以简写
    router

});

传参方式

$route.params : 与对应路由高度耦合，不灵活
props：组件和路由解耦

props 使用

定义props的值为布尔类型

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User, props: true},
    ]
})

组件获取使用props获取属性

 const User = {
     //使用props获取路由参数
     props: ['id'],
     //通过 $route.params 获取参数
     template: '<div>User {{ id }} 组件</div>'
 }

props还可以是一个对象

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User, props: {uname: 'test', age: 11 }},
    ]
})

注：此时id值无法访问

使用id的值方式如下：

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {
            path:'/user/:id',
            component: User, 
            //此时id的值和usname的值等都可使用
            props: route => ({uname: 'lisi' , age: 20, id: route.params.id })
        },
    ]
})

vue-router命名路由

概念

为了更加方便的表示路由的路径，给路由规则起一个别名，即为：命名路由

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {
            name: 'user',
            path:'/user/:id',
            component: User, 
            props: true
        }
    ]
})

页面跳转使用命名路由(to属性要添加：)

<router-link :to="{ name: 'user', params: {id: 123} }">User1</router-link

vue-router编程式导航

常见页面导航方式

声明式导航

<a></a>
<router-link></router-link>

编程式导航：通过调用JavaScript的API实现导航方式

location.href=

Vue中的编程式导航

this.$router.push('hash地址')
//n是历史记录 1：表示历史记录中前进1位 -1：表示历史记录中后退1位
this.$router.go(n)

Demo

push

const User = {
    //使用props获取路由参数
    props: ['id'],
    //通过 $route.params 获取参数
    template: `
    <div>
        <div>User {{id}} 组件</div>
        <button @click='goRegister'>跳转到注册界面</button>
    </div>`,
    methods: {
        goRegister(){
            //跳转指定页面
            this.$router.push('/register')
        }
    }
}

var Register = {
    template:  `
    <div>
    	<h1>Register 组件</h1>
    	<hr/>
    	<button @click='goBack'>回退一步</button>
    	<router-link to="/register/tab1">Tab1</router-link>
    	<router-link to="/register/tab2">Tab2</router-link>

        <!-- 子路由填充位 -->
        <router-view></router-view>
    </div>`,
    methods:{
        goBack(){
            //回退一步
            this.$router.go(-1);
        }
    }
}

push方法参数

//字符串
router.push('/home')
//对象
router.push({ path: '/home' })
//命名路由 携带参数
router.push({name: 'user', params: { user: 'test'} })
//查询参数 /register?name=test
router.push({ path: '/register', query: { name: 'test' } })

查看全文

相关阅读:
623. Add One Row to Tree 将一行添加到树中
 771. Jewels and Stones 珠宝和石头
 216. Combination Sum III 组合总数三
 384. Shuffle an Array 随机播放一个数组
 382. Linked List Random Node 链接列表随机节点
 向github项目push代码后，Jenkins实现其自动构建
 centos下安装Jenkins
python提取批量文件内的指定内容
 批处理实现：批量为文件添加注释
 python抓取每期双色球中奖号码，用于分析

原文地址：https://www.cnblogs.com/erkye/p/12833068.html