【vue】vue-router路由&页面跳转&vue设置页面标题

hanne_lovegood

已于 2022-05-16 15:53:47 修改

阅读量3.4k

点赞数

分类专栏： vue 文章标签： vue vue.js javascript 前端前端框架

于 2022-04-13 17:34:11 首次发布

本文链接：https://blog.csdn.net/hanne_lovegood/article/details/124151566

版权

本文介绍了Vue Router的基础用法，包括在`router/index.js`配置路由，`main.js`中引入并设置标题，以及如何在模板中使用`router-link`和`router-view`进行页面跳转。还探讨了路由嵌套和组件化带来的问题，提出了解决方案——使用折叠面板以节省移动端空间。

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

vue-router

2022/4/13 周三

vue新手入门，如有错误，欢迎在评论区指出，非常感谢！

1. router/index.js 配置路由

分为3步：
（1）导入 router包（如果没下载的需要先install下载）
（2）需要明确安装路由功能：
（3）配置路由

import Vue from 'vue'
import Router from 'vue-router' // 导入router包
import home from '@/home/index' // 路由里配置的组件都需要先导入
import one_premiun from '@/components/one_premiun'

Vue.use(Router) // 明确安装路由功能

export default new Router({
   
  routes: [ // 配置路由
  	{
   
      path: '/',
      name: 'home',
      component: home
    },
    {
   
      path: '/one_premiun',
      name