vue路由使用笔记

最新推荐文章于 2023-06-12 09:24:18 发布

weixin_41971413

最新推荐文章于 2023-06-12 09:24:18 发布

阅读量112

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41971413/article/details/107754907

版权

vue路由使用笔记

APP.vue

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import login from './components/login'
import select_btn from './components/select_btn'
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router
})

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/', redirect: Bar }
]

export default new VueRouter({
  routes
})

路由案例

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/login/Login'
import Home from '@/components/home/Home'
import Trans from '@/components/trans/Trans'
import See from "../components/see/See";
import ReviewBlock from "../components/reviewblock/ReviewBlock";
import WordList from "../components/word_list/WordList";
import WordDetail from "../components/worddetail/WordDetail";
import MyReview from "../components/myreview/MyReview";
import StaticView from "../components/staticview/StaticView";
import Register from "../components/register/Register";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/home',
      name: '首页',
      component: Home,
      meta: {
        keepAlive: false
      }
    },
    {
      path: '/fanyi',
      name: '翻译页',
      component: Trans
    },
    {
      path: '/see',
      name: '查看页',
      component: See,
      meta: {
        keepAlive: true
      },
      redirect: '/see/wordlist/',
      // component: See,
      children:[{
          path: '/see/wordlist/',
          component: WordList,
          meta: {
            keepAlive: true
          }
        },
        {
          path: '/see/reviewblock',
          component: ReviewBlock,
          meta: {
            keepAlive: true
          }
        }
      ]
    },
    {
      name: '单词详情页',
      path: '/worddetail',
      component: WordDetail,
      meta: {
        keepAlive: false
      }
    },
    {
      name: '背诵页',
      path: '/myreview',
      component: MyReview,
      meta: {
        keepAlive: true
      }
    },
    {
      name: '统计页',
      path: '/static',
      component: StaticView
    },
    {
      name: '註冊頁',
      path: '/register',
      component: Register
    }
  ],
})