vue定义路由，嵌套路由，路由重定向（详细代码）

最新推荐文章于 2024-05-10 16:06:07 发布

longlong6682

最新推荐文章于 2024-05-10 16:06:07 发布

阅读量2.9k

点赞数 4

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/longlong6682/article/details/105534128

版权

一. 定义路由

1、说明

路由是单页面应用程序（SPA）的关键，Vue提供过来路由插件，使用这个路由就要安装这个插件
安装： npm install vue-router
依赖于vue文件，所有要优先引入vue
引入路由之后，我们就可以基于组件+路由实现单页面应用程序开发
路由使用官网: https://router.vuejs.org/zh-cn/

2、路由作用

定义组件分成三步：1 定义组件容器元素， 2 定义组件类， 3 注册组件
当使用路由的时候，这三步就抽象成一步，我们只需要定义一个组件类参数对象即可
所以使用路由，让我们定义组件变得简单了，这里的组件对象，只能被路由使用

3、使用路由分成以下三步

1. 第一步定义路由规则

var routes = [{}, {}]，每一个参数代表一个路由对象
path定义规则；name定义路由名称；component 表示路由的组件：这里使用组件对象

2. 第二步实例化路由对象

实例化时候，我们要添加路由规则

3. 第三步在vue实例化对象中，注册路由

第一件事注册路由
第二件事定义路由渲染的容器（在模板中） router-view，渲染的时候，router-view会自动删除

注：在访问的url后面加上 #/home、#/detail、#/list 就会显示对应的组件内容

路由基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>vue实例化对象</h1>
        <router-view></router-view>        <!--定义渲染容器-->
    </div>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.js"></script>
    <script>
        var Home = {
   
            template:'<h1>home</h1>'
        };
        var List = {
   
            template:'<h1>list {
   {msg}}</h1>',
            data:function () {
   
                return {
   
                    msg: 'hello'
                }
            }
        };
        var Detail = {
   
            template:'<h1>detail</h1>',
        };

        // 第一步：定义路由规则
        var routes = [
            {
   
                path:'/home',
                name:'home',
                component:Home
            },
            {
   
                path:'/list',
                name:'list',
                component:List
            },
            {
   
                path:'/detail',
                name:'detail',
                component:Detail
            },
        ];

        // 第二步：实例化路由对象
        var router = new VueRouter({
   
            routes:routes
        });

        // 第三步：在vue实例化对象中注册路由
        var app = new Vue({
   
            el:'#app',
            router:router
        })
    </script>
</body>
</html>

二. 路由参数

1、路由参数说明

一个 ‘’/” 将路由切割成一个一个模块，这些模块默认都是静态路由
静态路由是不能变的，一个规则对应一个路径
动态路由：一个规则对应多个路径
例如 /page/:pageNum
- 匹配： /page/10, /page/100, /page/hello
- 不匹配： /list/10, /page/10/abc

2、路由参数使用范围

动态的路由参数是可以捕获的，并且在任何组件中（vue实例化对象），都可以捕获
每一个组件实例化对象，都添加了一个$route的参数，定义在组件实例化对象的原型上。
通过params属性，即可获取动态路由参数

最低0.47元/天解锁文章

longlong6682

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue定义路由，嵌套路由，路由重定向（详细代码）

目录：1. 定义路由2. 路由参数3. 嵌套路由4. 路由重定向5. 路由导航：router-link一. 定义路由1、说明路由是单页面应用程序（SPA）的关键，Vue提供过来路由插件，使用这个路由就要安装这个插件安装： npm install vue-router依赖于vue文件，所有要优先引入vue引入路由之后，我们就可以基于组件+路由实现单页面应用程序开发路...
复制链接

扫一扫