vue-router设置默认路由 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

vue-router

打开边栏(ESC) 关闭边栏(ESC)

vue-router设置默认路由

{
      path:'*', // 任何不存在的路径都会跳转到首页
      // path:'/',
      redirect:'/home', // 路径http://localhost:8080/#/home
      // component:Home // 路径http://localhost:8080/#/
    }

完整流程：

1，安装vue-router

npm i vue-router@3

一般vue2的项目对应的版本是vue-router@3版本

2，配置路由

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

// 引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
// 配置路由
export default new VueRouter({
  // 配置路由
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/search',
      component:Search
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/register',
      component:Register
    },
    {
      path:'*', // 任何不存在的路径都会跳转到首页
      // path:'/',
      redirect:'/home', // 路径http://localhost:8080/#/home
      // component:Home // 路径http://localhost:8080/#/
    }
  ]
})

3，引入注册路由

src\main.js

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')

4，使用路由-声明式导航

<router-link to="/login">登录</router-link>
<router-link to="/register" class="register">免费注册</router-link>

5，使用路由-编程式导航

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
            搜索
          </button>
<script>
export default {
  name: "Header",
  methods:{
    goSearch(){
      this.$router.push('/search')
    }
  }
};
</script>

赏