vue3.0配置vue-router
第一步:安装集成安装包npm install vue-router --save第二步:我们去package.json去看一下,如果vue-router是4.0.0以上的就是支持vue3的文档>>第三步:向应用中添加vue-router的实例1、打开main.ts引入vue-routerimport { createApp } from 'vue'import { createRout
·
第一步:安装集成安装包
npm install vue-router --save
第二步:我们去package.json去看一下,如果vue-router是4.0.0以上的就是支持vue3的
第三步:向应用中添加vue-router的实例
1、打开main.ts
引入vue-router
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from "./views/Home.vue"
import Login from "./views/Login.vue"
import ColumnDetail from "./views/ColumnDetail.vue"
import App from './App.vue'
const routerHistory = createWebHistory() // 引入路由方式
const router = createRouter({
history: routerHistory, // 表示接入哪种类型的路由
routes: [ // 定义路由信息
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/column/:id', // 冒号后面表示传的动态参数
name: 'column',
component: ColumnDetail
}
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
配置
<router-view></router-view>
跳转
<router-link class="navbar-brand" to="/">者也专栏</router-link>
<ul v-if="!user.isLogin" class="list-inline mb-0">
<li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">登陆</router-link></li>
<li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2">注册</router-link></li>
</ul>
路由URL传参数的方式
1、HTML中两种跳转方式
// 第一种:对象方式
<router-link :to="{name: 'column', params: {id: column.id }}" class="btn btn-outline-primary">进入专栏</router-link>
// 第二种:模版字符串方式
<router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>
2、编程式跳转
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
// 请注意这里引入的是useRouter,和下面的引入 的useRoute不一样,虽然差一个字母,
// 引入useRoute是获取路由的信息,useRouter是定义路由的一系列行为,完全不一样
import ValidateInput, { RulesProp } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import createMessage from '../components/createMessage'
export default defineComponent({
name: 'Login',
components: {
// ValidateInput,
// ValidateForm
},
setup() {
const emailVal = ref('')
const router = useRouter() // 1、获取useRouter
const store = useStore()
const emailRules: RulesProp = [
{ type: 'required', message: '电子邮箱地址不能为空' },
{ type: 'email', message: '请输入正确的电子邮箱格式' }
]
const passwordVal = ref('')
const passwordRules: RulesProp = [
{ type: 'required', message: '密码不能为空' }
]
const onFormSubmit = (result: boolean) => {
if (result) {
const payload = {
email: emailVal.value,
password: passwordVal.value
}
store.dispatch('loginAndFetch', payload).then(data => {
createMessage('登录成功 2秒后跳转首页', 'success')
setTimeout(() => {
router.push('/') // 2、我们可以使用push使他跳转到首面
// router.push({name: 'column', params:{ id : 1}}) // 传动态参数
}, 2000)
}).catch(e => {
console.log(e)
})
}
}
return {
emailRules,
emailVal,
passwordVal,
passwordRules,
onFormSubmit
}
}
})
</script>
3、使用vue-router提供的钩子函数获取路由参数
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router' // 注意写法,是useRoute不是useRouter
import { testData, testPosts } from '../testData'
import PostList from '../components/PostList.vue'
export default defineComponent({
components: {
PostList
},
setup() {
const route = useRoute()
const currentId = +route.params.id; // +表示将字符串类型数字转成数字类型
const column = testData.find(c => c.id === currentId)
const list = testPosts.filter(post => post.columnId === currentId)
return {
column,
list
}
}
})
更多推荐
已为社区贡献19条内容
所有评论(0)