Se for uma única página que usa o roteamento para obter uma atualização parcial da página,
primeiro você precisa ter os arquivos vue e vue-router.
Você pode ter vários métodos de instalação, como cdn ou npm. Não vou entrar em detalhes aqui . Basta pesquisar. Em seguida, tudo o que você precisa fazer é criar uma estrutura de página html e, em seguida, apresentar o recurso vue-roteador.
Aqui está um salto simples, o código é o seguinte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一</title>
<script src="./vue.min.js"></script>
<script src="./vuex.min.js"></script>
<script src="./vue-router.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
!-- 登录表单 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="用户名">
<el-input placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button type="danger" @click="logout">退出</el-button>
</el-form-item>
</el-form>
<!-- 在这里渲染路由 -->
<router-link to="/login">1</router-link>
<router-link to="/logout">2</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 定义组件
let login = {
template:`
<div>请登录<div>
`
};
let logout ={
template:`
<div>已登录<div>`
}
// 定义路由,每个路由应该映射一个组件。 其中"component" 可以是
//通过 Vue.extend() 创建的组件构造器，
let routes =[
{
path:'/login',component:login},
{
path:'/logout',component:logout}
]
// 创建一个vue-router实例,然后传 `routes` 配置参数,你还可以传别的参数
var router = new VueRouter({
routes:routes
})
// 定义一个vue实例
new Vue({
el:"#app",
data(){
return {
username:"",
password:""
}
},
methods:{
login(){
this.$router.push({
path:'/login'})
},
logout(){
this.$router.push({
path:'/logout'})
}
},
// 注入router
router
})
</script>
</html>
Etapa 1: personalizar dois ou mais componentes para exibir a página de que você precisa.
Etapa 2: definir a rota. Caminho e componente são os parâmetros do caminho e o nome do componente pode ter qualquer nome.
Etapa 3: criar uma instância de roteador de vue, a rota você define a passagem no passado
IV: o próximo passo é renderizar a página, com <router-link to='路径参数'></router-link>navegação, os componentes que você quer renderizar para renderizar <router-view></router-view>esse lugar existem que você quer pra essa renderização, <router-view></router-view>pode ser colocado em qualquer posição.
O efeito é mostrado na figura: (o padrão será renderizado como uma tag)
Após clicar,
se você quiser vinculá-lo a um botão, você só precisa adicionar dois eventos para os dois botões e, em seguida, no método correspondente (código onde ligação no botão de login e botão de saída, dois métodos foram adicionados ao login () e logout ()) correspondentes this.$router.push({path:'/login'})pode,
nota : dentro do exemplo Vue, você pode acessar a instância de roteamento por $ router. Então você pode chamar isso de. $ Router.push
quando você clica na <router-link>hora, esse método é chamado internamente, de forma que o clique <router-link to="...">é equivalente a chamar router.push(...).