Vue Router —— 基础

安装方式(vue)

1、npm安装

npm install vue-router

** main.js **
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2、CDN引入

在index.html中引入,vue-router文件。这样可以减小打包的文件体积,且无需安装。

** index.html **
<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>

在vue.config.js中配置一下,打包时忽略vue-router(已经全局引用)

//忽略的打包文件
config.externals({
  'vue-router': 'VueRouter',
});

路由跳转方式

1、使用 <router-link></router-link>, 一般被称为声明式导航
要结合router-view标签使用,否则无法渲染。router-link标签会被渲染成一个a标签。

** App.vue **
<template>
  <div id="app">
    <router-view />   // a标签被渲染在这里
  </div>
</template>

** index.vue **
<router-link to="/home"></router-link>  // to后面添加另外组件的路由地址

2、使用this.$router.push()跳转, 一般被称为编程式导航

** 通过this.$router访问路由器,通过this.$router.push()向浏览器的历史中添加一条记录来进行跳转。
其方式和history.pushstate()一致 **

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
this.$router.push('home')	// 字符串 
this.$router.push({path:'home'})	//对象
this.$router.push({name:'user'}, params:{userId:123})	//命名路由  /user/123
this.$router.push({ path: 'register', query: { page: 1 }})	//带查询参数 /register?page=1

**this.$router.push()方法中带有path的时候,parasm就会被忽略 **
const userId = '123'
// 下述两种方法的效果一致
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

重定向和别名

1、重定向redirect
例如本来要跳转到a界面,但是没有跳转到a界面,而跳转到了b界面。(重定向到了b)

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

** 
tip: 
redirect可以是一个路径,也可以是个对象,甚至是一个方法
redirect: {name:'b'}
redirect: to => {
	reutrun '/b'
}
**

**需要注意的是:导航守卫并不会作用于a路由上, 而是作用于重定向的路由, 即 b路由** 

2、别名alias
例如/a的别名是/b,但我们访问/b的时候,虽然url显示的是/b, 但是实际我们匹配到是/a的内容,就像是访问/a一样

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面我来为您介绍一下如何使用vue-router实现用户登录注册功能。 首先,我们需要安装vue-router,可以通过以下命令进行安装: ``` npm install vue-router --save ``` 然后,在main.js中引入并使用vue-router: ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来,我们新建一个router.js文件,用于配置路由。在该文件中,我们需要定义路由路径和路由组件: ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, { path: '/register', component: Register } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中,我们定义了两个路由路径:/login和/register,并分别对应了Login和Register两个组件。 接下来,在App.vue中,我们需要使用<router-view>标签来显示路由组件: ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后,在main.js中引入router.js,并将其挂载到Vue实例中: ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 至此,我们已经完成了基本的路由配置。接下来,我们可以在Login和Register组件中实现具体的登录和注册功能。 在Login组件中,我们可以使用Vue.js提供的v-model指令来绑定表单输入的数据,并在点击登录按钮时向服务器发送请求验证用户名和密码: ``` <template> <div class="login"> <h1>登录</h1> <form> <label>用户名:</label> <input type="text" v-model="username"> <br> <label>密码:</label> <input type="password" v-model="password"> <br> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向服务器发送请求验证用户名和密码 } } } </script> ``` 而在Register组件中,我们可以使用v-model指令来绑定表单输入的数据,并在点击注册按钮时向服务器发送请求创建新用户: ``` <template> <div class="register"> <h1>注册</h1> <form> <label>用户名:</label> <input type="text" v-model="username"> <br> <label>密码:</label> <input type="password" v-model="password"> <br> <label>确认密码:</label> <input type="password" v-model="confirmPassword"> <br> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' } }, methods: { register() { // 向服务器发送请求创建新用户 } } } </script> ``` 到这里,我们已经完成了一个简单的用户登录注册功能,并使用vue-router实现了路由跳转。当用户访问/login时,会显示Login组件;当用户访问/register时,会显示Register组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值