router路由完美demo

勘察加熊人

于 2021-09-22 10:01:25 发布

阅读量359

点赞数

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

本文链接：https://blog.csdn.net/cf8833/article/details/120409779

版权

本文提供了一个Vue.js路由的详细步骤，从添加依赖到配置各个组件，覆盖了主要的路由设置，适用于多种后端场景。通过这些步骤，你可以创建一个成功的路由处理Demo。

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

完美路由模板

step1: 添加依赖

npm install vue-router
npm install sass-loader

step2: F:\gftproject\vuetify\router\twelve\my-app\src\main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
   
  router,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

**step3: F:\gftproject\vuetify\router\twelve\my-app\src\App.vue

<template>
  <div>
    <Notifications />
    <router-view/>
  </div>
</template>
<script>
import Notifications from "@/components/Notifications";
export default {
     
  name: "HelloWorld",
  components: {
     
    Notifications
  },
};
</script>
<style>
</style>

step4: F:\gftproject\vuetify\router\twelve\my-app\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import CabHome from '@/components/Cab/CabHome'
import CabChemical from '@/components/Cab/CabChemical'
import NewsDetail from '@/components/Cab/recomendation/newsDetail'
import News from '@/components/Cab/recomendation/news'
Vue.use(Router)
export default new Router({
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
   
      path: '/',
      name: 'newsDetail',
      component: NewsDetail,
    },
    {
   
      path: '/newsDetail',
      name: 'newsDetail',
      component: NewsDetail,
    },
    {
   
      path: '/news',
      name: 'news',
      component: News,
    },
    {
   
      path: '/cabhome',
      name: 'CabHome',
      component: CabHome,
      children: [
        {
   
          path: 'crops',
          component: NewsDetail
        },
        {
   
          path: 'chemical',
          component: CabChemical,
        },
        {
   
          path: