点击新闻列表，跳转到新闻详情页面

最新推荐文章于 2022-11-14 20:37:24 发布

一个人两座城

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量3.2k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41716608/article/details/104735831

版权

这是一个关于使用Vue.js和vue-router进行页面跳转的案例，涉及一级路由、路由前置守卫和props正向传值。当用户未登录时，会被重定向到登录页面；点击新闻列表，则跳转到对应新闻的详情页面。

摘要由CSDN通过智能技术生成

此案例包含一级路由，路由前置守卫，props正向传值等知识点，

基本功能是：用户未登录，踢回登录页面，点击新闻列表，跳转相应新闻详情

相关代码如下：

需要下载vue和vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
    <style>
        a{
            margin-left:5px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="demo">
        <!-- 父传子 在子组件被调用的时候传入值 -->
        <com :obj="arr"></com>
       <router-view></router-view>
    </div>
    <template id="tema">
        <div>
            <p>首页</p>
        </div>
    </template>
    <template id="temb">
        <div>
            <div v-for="(v,i) in news">
                <router-link :to="{name:'detail',params:{id:v.id}}">{
  {v.title}}</router-link>
            </div>
        </div>
    </template>
    <template id="temc">
        <div>
           <h1>{
  {text[0].title}}</h1>
           <p>{
  {text[0].con}}</p>
        </div>
    </template>
    <template id="temd">
        <div>
            <p>登录</p>
        </div>
    </template>
    <template id="tem">
        <div>
            <span v-for="(v,i) in obj">
                <router-link

最低0.47元/天解锁文章

一个人两座城

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
点击新闻列表，跳转到新闻详情页面

此案例包含一级路由，路由前置守卫，props正向传值等知识点，基本功能是：用户未登录，踢回登录页面，点击新闻列表，跳转相应新闻详情相关代码如下：需要下载vue和vue-router<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫