Vue路由

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量57 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lsky985/article/details/132571211
版权

路由概念

路由设置步骤

路由嵌套和路由传参

编程式路由

路由概念

Vue属于单页应用（SPA），整个应用程序里只有一个html页面。

SPA没有浏览历史记录的功能，应用路由可以实现该功能。

设置步骤

1.导入路由的库文件

   <script src="https://unpkg.com/vue-router@4.0.6"></script>

2.定义路由组件

 const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }

3.定义路由规则

 const routes = [
            {
                path: '/home',
                component: Home
            },{
                path: '/news',
                component: News
            }
        ]

4.创建路由实例router（基本万年不变）

const router = VueRouter.createRouter({
            //配置路由模式
            history: VueRouter.createWebHashHistory(),
            //配置路由规则（当路由规则对象也为routes时，可简写为：routes）
            routes: routes     
        })

//路由模式如下

  • createWebHistory 路由模式：路径中不带#号。(生产环境下不能直接访问，需要进行转发)
  • createWebHashHistory 路由模式：路径中带#号。

5.将路由对象挂载到vue实例上

 // 通过use(router)注入路由，从而让整个应用都有路由功能
        Vue.createApp({
            data() {
                return {}
            }
        }).use(router).mount('#app');

补充：设置根路由

// 2. 定义路由规则对象（每个路由应该映射一个组件）
const routes = [
    {
        path: '/',            //根路由
        redirect: '/home'     //把根路由重定向到home
    },{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    }
]

嵌套路由

路由套路由（有父子关系）

  const routes = [
            {
                path: '/',                //根路由
                redirect: '/home'         //把根路由重定向到home
            }, {
                path: '/home',
                component: Home,
                children: [               //配置子路由
                    {
                        path: '/home',
                        redirect: '/home/login'
                    }, {
                        path: '/home/login',
                        component: Login
                    }, {
                        path: '/home/reg',
                        component: Reg
                    }
                ]
            }, {
                path: '/news',
                component: News
            },
        ]

路由传参

params

<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link>&nbsp;
            <router-link :to="{name:'News',params:{id:id,name:name}}">news</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: `<div>新闻;  
                        参数1：{{$route.params.id}}； 
                        参数2：{{$route.params.name}}
                    </div>`
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                name: 'Home',              //每个路由规则中必须要有一个name属性
                component: Home
            }, {
                path: '/news',
                name: 'News',
                component: News
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return {
                    id:1,
                    name:'zhangsan'
                }
            }
        }).use(router).mount('#app');
    </script>
</body>

query

<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link>&nbsp;
            <router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {+
            template: `<div>新闻;  
                           参数1：{{$route.query.id}}； 
                           参数2：{{$route.query.name}}
                       </div>`
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/news',
                component: News
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return {
                    id:1,
                    name:'zhangsan'
                }
            }
        }).use(router).mount('#app');
    </script>
</body>

params和query的区别

  1. query方式：类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。利用路由规则中的path跳转。
  2. params方式：类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。利用路由规则中的name跳转

使用params传参，且刷新不丢失参数

<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link>&nbsp;
            <!--<router-link :to="{name:'News',params:{id:id,name:name}}">news</router-link>-->
            <router-link to="/news/100/lisi">news</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: `<div>新闻;  
                        参数1：{{$route.params.id}}； 
                        参数2：{{$route.params.name}}
                    </div>`
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                name: 'Home',              //每个路由规则中必须要有一个name属性
                component: Home
            }, {
                path: '/news/:id/:name',
                name: 'News',
                component: News
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return {
                    id:1,
                    name:'zhangsan'
                }
            }
        }).use(router).mount('#app');
    </script>
</body>

编程式路由(主要是路由跳转)

this.$router.push()

this.$router.go(n) 路由的前进后退，n代表跳转个数，正数前进，负数后退

this.$router.forward()/back() 前进一页/后退一页

<body>
    <div id="app">
        <p>
            <button @click="toHome">首页</button>
            <button @click="toNews">新闻</button>
            <button @click="toLogin">登陆</button>
            <button @click="doForward1">前进</button>
            <button @click="doForward2">前进</button>
            <button @click="doBack1">后退</button>
            <button @click="doBack2">后退</button>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻：{{$route.query.id}},{{$route.query.name}}</div>'
        }
        const Login = {
            template: '<div>登陆</div>'
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/news',
                component: News
            }, {
                path: '/login',
                component: Login
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return {
                    id: 1,
                    name: 'zhangsan'
                }
            },
            methods: {
                toHome() {
                    //无参数时，push方法中直接写路由地址
                    this.$router.push('/home');
                },
                toNews() {
                    //有参数时，push方法中写一个json对象
                    this.$router.push({ path: '/news', query: { id:this.id, name:this.name } });
                },
                toLogin() {
                    this.$router.push('/login');
                },
                doForward1() {
                    this.$router.forward();
                },
                doForward2() {
                    this.$router.go(1);
                },
                doBack1() {
                    this.$router.back();
                },
                doBack2() {
                    this.$router.go(-1);
                }
            }
        }).use(router).mount('#app');
    </script>
</body>

watch监听路由

watch: {
    // 监听路由跳转。
    $route(newRoute, oldRoute) {
        console.log('watch', newRoute, oldRoute)
    }
}

导航守卫

  1. to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。
  2. from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。
  3. next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由）

<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link>&nbsp;
            <router-link to="/news">news</router-link>&nbsp;
            <router-link to="/login">login</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@3.0.11"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>

    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }
        const Login = {
            template: '<div>登录</div>'
        }

        const routes = [
            {
                path: '/',
                redirect: '/login'
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/news',
                component: News
            }, {
                path: '/login',
                component: Login
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        Vue.createApp({
            data() {
                return { }
            }
        }).use(router).mount('#app');

        // 添加全局路由守卫
        router.beforeEach((to, from, next) => {
            //创建守卫规则集合(这里表示'/home'与'/news'路径是需要权限验证的)
            const nextRoute = ['/home', '/news'];
            // 使用isLogin来模拟是否登录
            let isLogin = false;
            // 判断to.path(要跳转的路径)是否是需要权限验证的
            if (nextRoute.indexOf(to.path) >= 0) {
                if (!isLogin) {
                    router.push({
                        path: '/login'
                    })
                    //location.reload(); 
                }
            }
            next(); //必须要有
        });
    </script>
</body>

Lsky985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue 路由id_vue路由详解
weixin_33518100的博客
12-23 2745
自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像在 Vue 后面加载 vue-router，它会自动安装的：NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use()...
vue 路由
01-08
vue 路由 什么是路由 后端路由： 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 前端路由： 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，...
Vue 路由的基本使用
Errol's Blog
04-14 4181
文章目录路由的理解路由的基本使用一些注意点 路由的理解 生活中的路由： vue-router的理解： vue 的一个插件库，专门用来实现SPA应用(single page web application) 对SPA应用的理解： 1.单页Web应用(single page web application，SPA) 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取 什么是路由? 1.—个路由就是一组映射关系 (key - value
vue路由配置
m0_57108418的博客
07-07 2万+
二、配置路由 在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示在index.js文件中写入如下代码，实现创建一个路由器 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图 在main.js中注册路由 编辑student.vue路由 编辑school.vue路由 在app.vue中进行路由的使用 四、效
vue路由传值
weixin_48879122的博客
09-21 5031
本篇文章讲述了vue路由传值的方法和区别;
Vue路由拦截
aliyun3的博客
04-17 1万+
vue中鉴权的两种方法 常用的鉴权有两种：一种是路由拦截，一种是动态路由。 路由拦截 通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权。 如果权限不够，访问的路径虽然存在但会被拦截。 动态路由 在登录后根据用户信息以及权限动态地添加正确的权限路由，如果权限不够，访问的路径是不存在的。 比较 路由拦截实现起来相对简单，只需在登录的时候保存用户权限信息，然后编写路由的时候将需要鉴权的路由加上权限信息，然后在
Vue 路由重定向
热门推荐
Seric_xiao的博客
09-23 2万+
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的
vue 路由钩子
GXY1551705593的博客
10-19 4892
路由守卫分为三种 ——分别是：全局路由守卫、组件路由守卫、独享路由守卫。
Vue 路由钩子
bangbDIV的博客
09-14 8305
路由钩子分为三种： 全局钩子：beforeEach、 afterEach、beforeResolve 单个路由里面的钩子： beforeEnter 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 全局钩子： beforeEach：全局前置守卫 进入路由之前 beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 afterEach 全局后置钩子 进入路由之后 路由...
vue路由权限
m0_55783584的博客
05-21 1895
vue路由权限，路由一分为三，动态路由
vue路由传参 vue路由传参
11-18
vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
Vue路由跳转问题记录详解
12-09
最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。 路由设置如下： { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'...
解决vue路由name同名,路由重复的问题
10-15
主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 375
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 255
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 147
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 329
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue路由
05-25
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。使用 Vue Router ，我们可以实现单页面应用中的路由跳转、参数传递、路由拦截等功能。下面是 Vue Router 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lsky985

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值