1、新建带有router的vue项目，在views下添加NewsView.vue页面

  1. <template>
  2.     <div>
  3.         <ul>
  4.             <li>
  5.                 <router-link to="/newsdetails/百度">百度新闻</router-link>
  6.             </li>
  7.             <li>
  8.                 <router-link to="/newsdetails/腾讯">腾讯新闻</router-link>
  9.             </li>
  10.             <li>
  11.                 <router-link to="/newsdetails/网易">网易新闻</router-link>
  12.             </li>
  13.         </ul>
  14.     </div>NewsView
  15. </template>

2、在views下添加NewsDetailsView.vue页面

  1. <template>
  2.     <p> {{ $route.params.name }}详情 </p>
  3. </template>

3、在router的index.js中配置路由

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import HomeView from '../views/HomeView.vue'
  4. const routes = [
  5.   {
  6.     path: '/',
  7.     name: 'home',
  8.     component: HomeView
  9.   },
  10.   {
  11.     path: '/about',
  12.     name: 'about',
  13.     // 一般非首页会用这种方式进行引入，这种方式只有要显示时才会加载，相当于加快了网站首页的显示
  14.     component: () => import('../views/AboutView.vue')
  15.   },
  16.   {
  17.     path: '/news',
  18.     name: 'news',
  19.     // 一般非首页会用这种方式进行引入，这种方式只有要显示时才会加载，相当于加快了网站首页的显示
  20.     component: () => import('../views/NewsView')
  21.   },
  22.   {
  23.     path: '/newsdetails/:name',
  24.     name: 'newsdetails',
  25.     // 一般非首页会用这种方式进行引入，这种方式只有要显示时才会加载，相当于加快了网站首页的显示
  26.     component: () => import('../views/NewsDetailsView')
  27.   },
  28. ]
  30. const router = createRouter({
  31.   history: createWebHistory(process.env.BASE_URL),
  32.   routes
  33. })
  35. export default router

4、app.vue添加新闻

  1. <template>
  2.   <nav>
  3.     <router-link to="/">首页</router-link> |
  4.     <router-link to="/about">关于</router-link> |
  5.     <router-link to="/news">新闻</router-link> 
  6.   </nav>
  7.   <router-view/>
  8. </template>
  10. <style>
  11. #app {
  12.   font-family: Avenir, Helvetica, Arial, sans-serif;
  13.   -webkit-font-smoothing: antialiased;
  14.   -moz-osx-font-smoothing: grayscale;
  15.   text-align: center;
  16.   color: #2c3e50;
  17. }
  19. nav {
  20.   padding: 30px;
  21. }
  23. nav a {
  24.   font-weight: bold;
  25.   color: #2c3e50;
  26. }
  28. nav a.router-link-exact-active {
  29.   color: #42b983;
  30. }
  31. </style>

5、查看效果

新闻界面：
image.png
点击百度新闻，跳转到详情界面：
image.png